primereact 10.2.1 → 10.3.1

package/steps/steps.esm.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { PrimeReactContext } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { useMountEffect } from 'primereact/hooks';
-import { classNames, UniqueComponentId, mergeProps, IconUtils, ObjectUtils } from 'primereact/utils';
+import { classNames, UniqueComponentId, mergeProps, IconUtils, ObjectUtils, DomHandler } from 'primereact/utils';
 
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -125,7 +125,7 @@ var classes = {
     }, props.className);
   }
 };
-var styles = "\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n    \n    .p-steps ul {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n    \n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n    \n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n    \n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n    \n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n    \n    .p-steps-title {\n        white-space: nowrap;\n    }\n    \n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-steps-title {\n        display: block;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n\n    .p-steps ol {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n\n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n\n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n\n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n\n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n\n    .p-steps-title {\n        white-space: nowrap;\n    }\n\n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-steps-title {\n        display: block;\n    }\n}\n";
 var StepsBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Steps',
@@ -154,6 +154,7 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     idState = _React$useState2[0],
     setIdState = _React$useState2[1];
   var elementRef = React.useRef(null);
+  var listRef = React.useRef(null);
   var _StepsBase$setMetaDat = StepsBase.setMetaData({
       props: props,
       state: {
@@ -189,6 +190,81 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
       });
     }
   };
+  var onItemKeyDown = function onItemKeyDown(event, item, index) {
+    if (props.readOnly) {
+      return;
+    }
+    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 'Tab':
+        //no op
+        break;
+      case 'Enter':
+      case 'Space':
+        itemClick(event, item, index);
+        event.preventDefault();
+        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 ? nextItem.children[0] : null;
+  };
+  var findPrevItem = function findPrevItem(item) {
+    var prevItem = item.parentElement.previousElementSibling;
+    return prevItem ? prevItem.children[0] : null;
+  };
+  var findFirstItem = function findFirstItem() {
+    var firstSibling = DomHandler.findSingle(listRef.current, '[data-pc-section="menuitem"]');
+    return firstSibling ? firstSibling.children[0] : null;
+  };
+  var findLastItem = function findLastItem() {
+    var siblings = DomHandler.find(listRef.current, '[data-pc-section="menuitem"]');
+    return siblings ? siblings[siblings.length - 1].children[0] : null;
+  };
+  var setFocusToMenuitem = function setFocusToMenuitem(target, focusableItem) {
+    target.tabIndex = '-1';
+    focusableItem.tabIndex = '0';
+    setTimeout(function () {
+      return focusableItem.focus();
+    }, 0);
+  };
+  var setFocusToFirstItem = function setFocusToFirstItem() {
+    var firstItem = findFirstItem();
+    firstItem.tabIndex = '0';
+    firstItem.focus();
+  };
   var createItem = function createItem(item, index) {
     if (item.visible === false) {
       return null;
@@ -196,7 +272,6 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     var key = item.id || idState + '_' + index;
     var active = index === props.activeIndex;
     var disabled = item.disabled || index !== props.activeIndex && props.readOnly;
-    var tabIndex = disabled ? -1 : '';
     var iconClassName = classNames('p-menuitem-icon', item.icon);
     var iconProps = mergeProps({
       className: cx('icon', {
@@ -216,12 +291,17 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     var actionProps = mergeProps({
       href: item.url || '#',
       className: cx('action'),
-      role: 'presentation',
+      tabIndex: '-1',
+      onFocus: function onFocus(event) {
+        return event.stopPropagation();
+      },
       target: item.target,
+      onKeyDown: function onKeyDown(event) {
+        return onItemKeyDown(event, item, index);
+      },
       onClick: function onClick(event) {
         return itemClick(event, item, index);
-      },
-      tabIndex: tabIndex
+      }
     }, ptm('action'));
     var content = /*#__PURE__*/React.createElement("a", actionProps, /*#__PURE__*/React.createElement("span", stepProps, index + 1), icon, label);
     if (item.template) {
@@ -233,9 +313,9 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
         labelClassName: 'p-steps-title',
         numberClassName: 'p-steps-number',
         iconClassName: iconClassName,
+        'aria-current': active,
         element: content,
         props: props,
-        tabIndex: tabIndex,
         active: active,
         disabled: disabled
       };
@@ -249,20 +329,26 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
         disabled: disabled,
         item: item
       }),
-      style: item.style,
-      role: 'tab',
-      'aria-selected': active,
-      'aria-expanded': active
+      style: item.style
     }, ptm('menuitem'));
     return /*#__PURE__*/React.createElement("li", menuItemProps, content);
   };
   var createItems = function createItems() {
     var menuProps = mergeProps({
-      role: 'tablist'
+      ref: listRef,
+      tabIndex: props.readOnly ? null : '0',
+      onFocus: function onFocus() {
+        if (!props.readOnly) {
+          setFocusToFirstItem();
+        }
+      },
+      onBlur: function onBlur() {
+        return setFocusToFirstItem;
+      }
     }, ptm('menu'));
     if (props.model) {
       var _items = props.model.map(createItem);
-      return /*#__PURE__*/React.createElement("ul", menuProps, _items);
+      return /*#__PURE__*/React.createElement("ol", menuProps, _items);
     }
     return null;
   };
@@ -286,7 +372,7 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     style: props.style
   }, StepsBase.getOtherProps(props), ptm('root'));
   var items = createItems();
-  return /*#__PURE__*/React.createElement("div", rootProps, items);
+  return /*#__PURE__*/React.createElement("nav", rootProps, items);
 }));
 Steps.displayName = 'Steps';
 

package/steps/steps.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 i}from"primereact/hooks";import{classNames as l,UniqueComponentId as o,mergeProps as a,IconUtils as s,ObjectUtils as c}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 u(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 m(e){var t=u(e,"string");return"symbol"===p(t)?t:String(t)}function f(e){if(Array.isArray(e))return e}function d(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,l,o,a=[],s=!0,c=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=l.call(n)).done)&&(a.push(r.value),a.length!==t);s=!0);}catch(e){c=!0,i=e}finally{try{if(!s&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw i}}return a}}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 b(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 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.")}var g=n.extend({defaultProps:{__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null,children:void 0},css:{classes:{icon:function(e){return l("p-menuitem-icon",e.item.icon)},label:"p-steps-title",step:"p-steps-number",action:"p-menuitem-link",menuitem:function(e){return l("p-steps-item",e.item.className,{"p-highlight p-steps-current":e.active,"p-disabled":e.disabled})},root:function(e){var t=e.props;return l("p-steps p-component",{"p-readonly":t.readOnly},t.className)}},styles:"\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n    \n    .p-steps ul {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n    \n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n    \n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n    \n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n    \n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n    \n    .p-steps-title {\n        white-space: nowrap;\n    }\n    \n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-steps-title {\n        display: block;\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 h(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,i,l;r=e,l=n[t],(i=m(i=t))in r?Object.defineProperty(r,i,{value:l,enumerable:!0,configurable:!0,writable:!0}):r[i]=l})):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 S=e.memo(e.forwardRef((function(n,p){var u,m,y=e.useContext(t),O=g.getProps(n,y),S=e.useState(O.id),j=(m=2,f(u=S)||d(u,m)||b(u,m)||v()),x=j[0],w=j[1],E=e.useRef(null),N=g.setMetaData({props:O,state:{id:x}}),P=N.ptm,k=N.cx;r(g.css.styles,N.isUnstyled,{name:"steps"});var I=function(e,t,n){O.readOnly||t.disabled?e.preventDefault():(O.onSelect&&O.onSelect({originalEvent:e,item:t,index:n}),t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t,index:n}))},C=function(t,n){if(!1===t.visible)return null;var r=t.id||x+"_"+n,i=n===O.activeIndex,o=t.disabled||n!==O.activeIndex&&O.readOnly,p=o?-1:"",u=l("p-menuitem-icon",t.icon),m=a({className:k("icon",{item:t})},P("icon")),f=s.getJSXIcon(t.icon,h({},m),{props:O}),d=a({className:k("label")},P("label")),y=t.label&&e.createElement("span",d,t.label),b=a({className:k("step")},P("step")),v=a({href:t.url||"#",className:k("action"),role:"presentation",target:t.target,onClick:function(e){return I(e,t,n)},tabIndex:p},P("action")),g=e.createElement("a",v,e.createElement("span",b,n+1),f,y);t.template&&(g=c.getJSXElement(t.template,t,{onClick:function(e){return I(e,t,n)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:u,element:g,props:O,tabIndex:p,active:i,disabled:o}));var S=a({key:r,id:r,className:k("menuitem",{active:i,disabled:o,item:t}),style:t.style,role:"tab","aria-selected":i,"aria-expanded":i},P("menuitem"));return e.createElement("li",S,g)};i((function(){x||w(o())})),e.useImperativeHandle(p,(function(){return{props:O,getElement:function(){return E.current}}}));var D=a({id:O.id,ref:E,className:k("root"),style:O.style},g.getOtherProps(O),P("root")),A=function(){var t=a({role:"tablist"},P("menu"));if(O.model){var n=O.model.map(C);return e.createElement("ul",t,n)}return null}();return e.createElement("div",D,A)})));S.displayName="Steps";export{S as Steps};
+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 i}from"primereact/hooks";import{classNames as a,UniqueComponentId as o,mergeProps as l,IconUtils as c,ObjectUtils as s,DomHandler as u}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 m(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 f(e){var t=m(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,i,a,o,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,i=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw i}}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 v(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 g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var h=n.extend({defaultProps:{__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null,children:void 0},css:{classes:{icon:function(e){return a("p-menuitem-icon",e.item.icon)},label:"p-steps-title",step:"p-steps-number",action:"p-menuitem-link",menuitem:function(e){return a("p-steps-item",e.item.className,{"p-highlight p-steps-current":e.active,"p-disabled":e.disabled})},root:function(e){var t=e.props;return a("p-steps p-component",{"p-readonly":t.readOnly},t.className)}},styles:"\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n\n    .p-steps ol {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n\n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n\n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n\n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n\n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n\n    .p-steps-title {\n        white-space: nowrap;\n    }\n\n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-steps-title {\n        display: block;\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,i,a;r=e,a=n[t],(i=f(i=t))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):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 x=e.memo(e.forwardRef((function(n,p){var m,f,b=e.useContext(t),O=h.getProps(n,b),x=e.useState(O.id),j=(f=2,d(m=x)||y(m,f)||v(m,f)||g()),w=j[0],E=j[1],P=e.useRef(null),k=e.useRef(null),N=h.setMetaData({props:O,state:{id:w}}),D=N.ptm,I=N.cx;r(h.css.styles,N.isUnstyled,{name:"steps"});var A=function(e,t,n){O.readOnly||t.disabled?e.preventDefault():(O.onSelect&&O.onSelect({originalEvent:e,item:t,index:n}),t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t,index:n}))},C=function(e,t,n){if(!O.readOnly)switch(e.code){case"ArrowRight":T(e.target),e.preventDefault();break;case"ArrowLeft":R(e.target),e.preventDefault();break;case"Home":_(e.target),e.preventDefault();break;case"End":F(e.target),e.preventDefault();break;case"Tab":break;case"Enter":case"Space":A(e,t,n),e.preventDefault()}},T=function(e){var t=H(e);t&&X(e,t)},R=function(e){var t=J(e);t&&X(e,t)},_=function(e){var t=M();t&&X(e,t)},F=function(e){var t=U();t&&X(e,t)},H=function(e){var t=e.parentElement.nextElementSibling;return t?t.children[0]:null},J=function(e){var t=e.parentElement.previousElementSibling;return t?t.children[0]:null},M=function(){var e=u.findSingle(k.current,'[data-pc-section="menuitem"]');return e?e.children[0]:null},U=function(){var e=u.find(k.current,'[data-pc-section="menuitem"]');return e?e[e.length-1].children[0]:null},X=function(e,t){e.tabIndex="-1",t.tabIndex="0",setTimeout((function(){return t.focus()}),0)},B=function(){var e=M();e.tabIndex="0",e.focus()},K=function(t,n){if(!1===t.visible)return null;var r=t.id||w+"_"+n,i=n===O.activeIndex,o=t.disabled||n!==O.activeIndex&&O.readOnly,u=a("p-menuitem-icon",t.icon),p=l({className:I("icon",{item:t})},D("icon")),m=c.getJSXIcon(t.icon,S({},p),{props:O}),f=l({className:I("label")},D("label")),d=t.label&&e.createElement("span",f,t.label),y=l({className:I("step")},D("step")),b=l({href:t.url||"#",className:I("action"),tabIndex:"-1",onFocus:function(e){return e.stopPropagation()},target:t.target,onKeyDown:function(e){return C(e,t,n)},onClick:function(e){return A(e,t,n)}},D("action")),v=e.createElement("a",b,e.createElement("span",y,n+1),m,d);t.template&&(v=s.getJSXElement(t.template,t,{onClick:function(e){return A(e,t,n)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:u,"aria-current":i,element:v,props:O,active:i,disabled:o}));var g=l({key:r,id:r,className:I("menuitem",{active:i,disabled:o,item:t}),style:t.style},D("menuitem"));return e.createElement("li",g,v)};i((function(){w||E(o())})),e.useImperativeHandle(p,(function(){return{props:O,getElement:function(){return P.current}}}));var L=l({id:O.id,ref:P,className:I("root"),style:O.style},h.getOtherProps(O),D("root")),Y=function(){var t=l({ref:k,tabIndex:O.readOnly?null:"0",onFocus:function(){O.readOnly||B()},onBlur:function(){return B}},D("menu"));if(O.model){var n=O.model.map(K);return e.createElement("ol",t,n)}return null}();return e.createElement("nav",L,Y)})));x.displayName="Steps";export{x as Steps};

package/steps/steps.js

@@ -142,7 +142,7 @@ this.primereact.steps = (function (exports, React, api, componentbase, hooks, ut
       }, props.className);
     }
   };
-  var styles = "\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n    \n    .p-steps ul {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n    \n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n    \n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n    \n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n    \n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n    \n    .p-steps-title {\n        white-space: nowrap;\n    }\n    \n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-steps-title {\n        display: block;\n    }\n}\n";
+  var styles = "\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n\n    .p-steps ol {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n\n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n\n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n\n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n\n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n\n    .p-steps-title {\n        white-space: nowrap;\n    }\n\n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-steps-title {\n        display: block;\n    }\n}\n";
   var StepsBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Steps',
@@ -171,6 +171,7 @@ this.primereact.steps = (function (exports, React, api, componentbase, hooks, ut
       idState = _React$useState2[0],
       setIdState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
+    var listRef = React__namespace.useRef(null);
     var _StepsBase$setMetaDat = StepsBase.setMetaData({
         props: props,
         state: {
@@ -206,6 +207,81 @@ this.primereact.steps = (function (exports, React, api, componentbase, hooks, ut
         });
       }
     };
+    var onItemKeyDown = function onItemKeyDown(event, item, index) {
+      if (props.readOnly) {
+        return;
+      }
+      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 'Tab':
+          //no op
+          break;
+        case 'Enter':
+        case 'Space':
+          itemClick(event, item, index);
+          event.preventDefault();
+          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 ? nextItem.children[0] : null;
+    };
+    var findPrevItem = function findPrevItem(item) {
+      var prevItem = item.parentElement.previousElementSibling;
+      return prevItem ? prevItem.children[0] : null;
+    };
+    var findFirstItem = function findFirstItem() {
+      var firstSibling = utils.DomHandler.findSingle(listRef.current, '[data-pc-section="menuitem"]');
+      return firstSibling ? firstSibling.children[0] : null;
+    };
+    var findLastItem = function findLastItem() {
+      var siblings = utils.DomHandler.find(listRef.current, '[data-pc-section="menuitem"]');
+      return siblings ? siblings[siblings.length - 1].children[0] : null;
+    };
+    var setFocusToMenuitem = function setFocusToMenuitem(target, focusableItem) {
+      target.tabIndex = '-1';
+      focusableItem.tabIndex = '0';
+      setTimeout(function () {
+        return focusableItem.focus();
+      }, 0);
+    };
+    var setFocusToFirstItem = function setFocusToFirstItem() {
+      var firstItem = findFirstItem();
+      firstItem.tabIndex = '0';
+      firstItem.focus();
+    };
     var createItem = function createItem(item, index) {
       if (item.visible === false) {
         return null;
@@ -213,7 +289,6 @@ this.primereact.steps = (function (exports, React, api, componentbase, hooks, ut
       var key = item.id || idState + '_' + index;
       var active = index === props.activeIndex;
       var disabled = item.disabled || index !== props.activeIndex && props.readOnly;
-      var tabIndex = disabled ? -1 : '';
       var iconClassName = utils.classNames('p-menuitem-icon', item.icon);
       var iconProps = utils.mergeProps({
         className: cx('icon', {
@@ -233,12 +308,17 @@ this.primereact.steps = (function (exports, React, api, componentbase, hooks, ut
       var actionProps = utils.mergeProps({
         href: item.url || '#',
         className: cx('action'),
-        role: 'presentation',
+        tabIndex: '-1',
+        onFocus: function onFocus(event) {
+          return event.stopPropagation();
+        },
         target: item.target,
+        onKeyDown: function onKeyDown(event) {
+          return onItemKeyDown(event, item, index);
+        },
         onClick: function onClick(event) {
           return itemClick(event, item, index);
-        },
-        tabIndex: tabIndex
+        }
       }, ptm('action'));
       var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, /*#__PURE__*/React__namespace.createElement("span", stepProps, index + 1), icon, label);
       if (item.template) {
@@ -250,9 +330,9 @@ this.primereact.steps = (function (exports, React, api, componentbase, hooks, ut
           labelClassName: 'p-steps-title',
           numberClassName: 'p-steps-number',
           iconClassName: iconClassName,
+          'aria-current': active,
           element: content,
           props: props,
-          tabIndex: tabIndex,
           active: active,
           disabled: disabled
         };
@@ -266,20 +346,26 @@ this.primereact.steps = (function (exports, React, api, componentbase, hooks, ut
           disabled: disabled,
           item: item
         }),
-        style: item.style,
-        role: 'tab',
-        'aria-selected': active,
-        'aria-expanded': active
+        style: item.style
       }, ptm('menuitem'));
       return /*#__PURE__*/React__namespace.createElement("li", menuItemProps, content);
     };
     var createItems = function createItems() {
       var menuProps = utils.mergeProps({
-        role: 'tablist'
+        ref: listRef,
+        tabIndex: props.readOnly ? null : '0',
+        onFocus: function onFocus() {
+          if (!props.readOnly) {
+            setFocusToFirstItem();
+          }
+        },
+        onBlur: function onBlur() {
+          return setFocusToFirstItem;
+        }
       }, ptm('menu'));
       if (props.model) {
         var _items = props.model.map(createItem);
-        return /*#__PURE__*/React__namespace.createElement("ul", menuProps, _items);
+        return /*#__PURE__*/React__namespace.createElement("ol", menuProps, _items);
       }
       return null;
     };
@@ -303,7 +389,7 @@ this.primereact.steps = (function (exports, React, api, componentbase, hooks, ut
       style: props.style
     }, StepsBase.getOtherProps(props), ptm('root'));
     var items = createItems();
-    return /*#__PURE__*/React__namespace.createElement("div", rootProps, items);
+    return /*#__PURE__*/React__namespace.createElement("nav", rootProps, items);
   }));
   Steps.displayName = 'Steps';
 

package/steps/steps.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.steps=function(e,t,n,r,i,l){"use strict";function a(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=a(t);function s(e){return s="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},s(e)}function c(e,t){if("object"!==s(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==s(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function u(e){var t=c(e,"string");return"symbol"===s(t)?t:String(t)}function p(e){if(Array.isArray(e))return e}function m(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,l,a,o=[],s=!0,c=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=l.call(n)).done)&&(o.push(r.value),o.length!==t);s=!0);}catch(e){c=!0,i=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}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 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.")}var b=r.ComponentBase.extend({defaultProps:{__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null,children:void 0},css:{classes:{icon:function(e){return l.classNames("p-menuitem-icon",e.item.icon)},label:"p-steps-title",step:"p-steps-number",action:"p-menuitem-link",menuitem:function(e){return l.classNames("p-steps-item",e.item.className,{"p-highlight p-steps-current":e.active,"p-disabled":e.disabled})},root:function(e){var t=e.props;return l.classNames("p-steps p-component",{"p-readonly":t.readOnly},t.className)}},styles:"\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n    \n    .p-steps ul {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n    \n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n    \n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n    \n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n    \n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n    \n    .p-steps-title {\n        white-space: nowrap;\n    }\n    \n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-steps-title {\n        display: block;\n    }\n}\n"}});function v(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 g(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(Object(n),!0).forEach((function(t){var r,i,l;r=e,l=n[t],(i=u(i=t))in r?Object.defineProperty(r,i,{value:l,enumerable:!0,configurable:!0,writable:!0}):r[i]=l})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var O=o.memo(o.forwardRef((function(e,t){var a,s,c=o.useContext(n.PrimeReactContext),u=b.getProps(e,c),f=o.useState(u.id),v=(s=2,p(a=f)||m(a,s)||d(a,s)||y()),O=v[0],j=v[1],h=o.useRef(null),P=b.setMetaData({props:u,state:{id:O}}),S=P.ptm,x=P.cx;r.useHandleStyle(b.css.styles,P.isUnstyled,{name:"steps"});var N=function(e,t,n){u.readOnly||t.disabled?e.preventDefault():(u.onSelect&&u.onSelect({originalEvent:e,item:t,index:n}),t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t,index:n}))},w=function(e,t){if(!1===e.visible)return null;var n=e.id||O+"_"+t,r=t===u.activeIndex,i=e.disabled||t!==u.activeIndex&&u.readOnly,a=i?-1:"",s=l.classNames("p-menuitem-icon",e.icon),c=l.mergeProps({className:x("icon",{item:e})},S("icon")),p=l.IconUtils.getJSXIcon(e.icon,g({},c),{props:u}),m=l.mergeProps({className:x("label")},S("label")),f=e.label&&o.createElement("span",m,e.label),d=l.mergeProps({className:x("step")},S("step")),y=l.mergeProps({href:e.url||"#",className:x("action"),role:"presentation",target:e.target,onClick:function(n){return N(n,e,t)},tabIndex:a},S("action")),b=o.createElement("a",y,o.createElement("span",d,t+1),p,f);e.template&&(b=l.ObjectUtils.getJSXElement(e.template,e,{onClick:function(n){return N(n,e,t)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:s,element:b,props:u,tabIndex:a,active:r,disabled:i}));var v=l.mergeProps({key:n,id:n,className:x("menuitem",{active:r,disabled:i,item:e}),style:e.style,role:"tab","aria-selected":r,"aria-expanded":r},S("menuitem"));return o.createElement("li",v,b)};i.useMountEffect((function(){O||j(l.UniqueComponentId())})),o.useImperativeHandle(t,(function(){return{props:u,getElement:function(){return h.current}}}));var E=l.mergeProps({id:u.id,ref:h,className:x("root"),style:u.style},b.getOtherProps(u),S("root")),I=function(){var e=l.mergeProps({role:"tablist"},S("menu"));if(u.model){var t=u.model.map(w);return o.createElement("ul",e,t)}return null}();return o.createElement("div",E,I)})));return O.displayName="Steps",e.Steps=O,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.steps=function(e,t,n,r,i,a){"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 l=o(t);function s(e){return s="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},s(e)}function c(e,t){if("object"!==s(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==s(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function u(e){var t=c(e,"string");return"symbol"===s(t)?t:String(t)}function p(e){if(Array.isArray(e))return e}function m(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,a,o,l=[],s=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=a.call(n)).done)&&(l.push(r.value),l.length!==t);s=!0);}catch(e){c=!0,i=e}finally{try{if(!s&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw i}}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 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.")}var y=r.ComponentBase.extend({defaultProps:{__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null,children:void 0},css:{classes:{icon:function(e){return a.classNames("p-menuitem-icon",e.item.icon)},label:"p-steps-title",step:"p-steps-number",action:"p-menuitem-link",menuitem:function(e){return a.classNames("p-steps-item",e.item.className,{"p-highlight p-steps-current":e.active,"p-disabled":e.disabled})},root:function(e){var t=e.props;return a.classNames("p-steps p-component",{"p-readonly":t.readOnly},t.className)}},styles:"\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n\n    .p-steps ol {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n\n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n\n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n\n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n\n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n\n    .p-steps-title {\n        white-space: nowrap;\n    }\n\n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-steps-title {\n        display: block;\n    }\n}\n"}});function v(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 g(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(Object(n),!0).forEach((function(t){var r,i,a;r=e,a=n[t],(i=u(i=t))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var O=l.memo(l.forwardRef((function(e,t){var o,s,c=l.useContext(n.PrimeReactContext),u=y.getProps(e,c),f=l.useState(u.id),v=(s=2,p(o=f)||m(o,s)||d(o,s)||b()),O=v[0],h=v[1],S=l.useRef(null),j=l.useRef(null),P=y.setMetaData({props:u,state:{id:O}}),x=P.ptm,E=P.cx;r.useHandleStyle(y.css.styles,P.isUnstyled,{name:"steps"});var w=function(e,t,n){u.readOnly||t.disabled?e.preventDefault():(u.onSelect&&u.onSelect({originalEvent:e,item:t,index:n}),t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t,index:n}))},N=function(e,t,n){if(!u.readOnly)switch(e.code){case"ArrowRight":k(e.target),e.preventDefault();break;case"ArrowLeft":D(e.target),e.preventDefault();break;case"Home":I(e.target),e.preventDefault();break;case"End":C(e.target),e.preventDefault();break;case"Tab":break;case"Enter":case"Space":w(e,t,n),e.preventDefault()}},k=function(e){var t=A(e);t&&M(e,t)},D=function(e){var t=_(e);t&&M(e,t)},I=function(e){var t=R();t&&M(e,t)},C=function(e){var t=H();t&&M(e,t)},A=function(e){var t=e.parentElement.nextElementSibling;return t?t.children[0]:null},_=function(e){var t=e.parentElement.previousElementSibling;return t?t.children[0]:null},R=function(){var e=a.DomHandler.findSingle(j.current,'[data-pc-section="menuitem"]');return e?e.children[0]:null},H=function(){var e=a.DomHandler.find(j.current,'[data-pc-section="menuitem"]');return e?e[e.length-1].children[0]:null},M=function(e,t){e.tabIndex="-1",t.tabIndex="0",setTimeout((function(){return t.focus()}),0)},T=function(){var e=R();e.tabIndex="0",e.focus()},U=function(e,t){if(!1===e.visible)return null;var n=e.id||O+"_"+t,r=t===u.activeIndex,i=e.disabled||t!==u.activeIndex&&u.readOnly,o=a.classNames("p-menuitem-icon",e.icon),s=a.mergeProps({className:E("icon",{item:e})},x("icon")),c=a.IconUtils.getJSXIcon(e.icon,g({},s),{props:u}),p=a.mergeProps({className:E("label")},x("label")),m=e.label&&l.createElement("span",p,e.label),f=a.mergeProps({className:E("step")},x("step")),d=a.mergeProps({href:e.url||"#",className:E("action"),tabIndex:"-1",onFocus:function(e){return e.stopPropagation()},target:e.target,onKeyDown:function(n){return N(n,e,t)},onClick:function(n){return w(n,e,t)}},x("action")),b=l.createElement("a",d,l.createElement("span",f,t+1),c,m);e.template&&(b=a.ObjectUtils.getJSXElement(e.template,e,{onClick:function(n){return w(n,e,t)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:o,"aria-current":r,element:b,props:u,active:r,disabled:i}));var y=a.mergeProps({key:n,id:n,className:E("menuitem",{active:r,disabled:i,item:e}),style:e.style},x("menuitem"));return l.createElement("li",y,b)};i.useMountEffect((function(){O||h(a.UniqueComponentId())})),l.useImperativeHandle(t,(function(){return{props:u,getElement:function(){return S.current}}}));var B=a.mergeProps({id:u.id,ref:S,className:E("root"),style:u.style},y.getOtherProps(u),x("root")),F=function(){var e=a.mergeProps({ref:j,tabIndex:u.readOnly?null:"0",onFocus:function(){u.readOnly||T()},onBlur:function(){return T}},x("menu"));if(u.model){var t=u.model.map(U);return l.createElement("ol",e,t)}return null}();return l.createElement("nav",B,F)})));return O.displayName="Steps",e.Steps=O,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);

package/tabmenu/tabmenu.cjs.js

@@ -149,13 +149,15 @@ var classes = {
     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,
@@ -185,18 +187,20 @@ var TabMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   var navRef = React__namespace.useRef(null);
   var tabsRef = React__namespace.useRef({});
   var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
-  var _TabMenuBase$setMetaD = TabMenuBase.setMetaData({
-      props: props,
-      state: {
-        id: idState,
-        activeIndex: activeIndexState
-      }
-    }),
+  var metaData = {
+    props: props,
+    state: {
+      id: idState,
+      activeIndex: activeIndexState
+    }
+  };
+  var _TabMenuBase$setMetaD = TabMenuBase.setMetaData(_objectSpread({}, metaData)),
     ptm = _TabMenuBase$setMetaD.ptm,
     cx = _TabMenuBase$setMetaD.cx,
     isUnstyled = _TabMenuBase$setMetaD.isUnstyled;
   var getPTOptions = function getPTOptions(key, item, index) {
     return ptm(key, {
+      parent: metaData,
       context: {
         item: item,
         index: index
@@ -235,9 +239,20 @@ var TabMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   };
   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 () {
@@ -256,6 +271,79 @@ var TabMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   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;
@@ -285,12 +373,14 @@ var TabMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     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) {
@@ -313,15 +403,18 @@ var TabMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       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);
@@ -333,12 +426,15 @@ var TabMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     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,