primereact 10.4.0 → 10.5.0

package/selectbutton/selectbutton.cjs.js

@@ -77,6 +77,46 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _nonIterableRest() {
+  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 _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 var classes = {
   root: function root(_ref) {
     var props = _ref.props;
@@ -121,46 +161,6 @@ var SelectButtonBase = componentbase.ComponentBase.extend({
   }
 });
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _nonIterableRest() {
-  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 _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
 var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -179,7 +179,8 @@ var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     });
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event, index) {
+    props.setFocusedIndex(index);
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
@@ -193,13 +194,46 @@ var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var onBlur = function onBlur() {
     setFocusedState(false);
   };
-  var onKeyDown = function onKeyDown(event) {
-    var keyCode = event.which;
-    if (keyCode === 32) {
-      onClick(event);
-      event.preventDefault();
+  var _onKeyDown = function onKeyDown(event, index) {
+    switch (event.code) {
+      case 'Space':
+        {
+          _onClick(event, index);
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowDown':
+      case 'ArrowRight':
+        {
+          changeTabIndexes(event, 'next');
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        {
+          changeTabIndexes(event, 'prev');
+          event.preventDefault();
+          break;
+        }
     }
   };
+  var changeTabIndexes = function changeTabIndexes(event, direction) {
+    var firstTabableChild, index;
+    for (var i = 0; i <= props.elementRef.current.children.length - 1; i++) {
+      if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') firstTabableChild = {
+        elem: props.elementRef.current.children[i],
+        index: i
+      };
+    }
+    if (direction === 'prev') {
+      if (firstTabableChild.index === 0) index = props.elementRef.current.children.length - 1;else index = firstTabableChild.index - 1;
+    } else {
+      if (firstTabableChild.index === props.elementRef.current.children.length - 1) index = 0;else index = firstTabableChild.index + 1;
+    }
+    props.setFocusedIndex(index);
+    props.elementRef.current.children[index].focus();
+  };
   var createContent = function createContent() {
     var labelProps = mergeProps({
       className: cx('label')
@@ -215,9 +249,14 @@ var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
     role: 'button',
     'aria-label': props.label,
     'aria-pressed': props.selected,
-    onClick: onClick,
-    onKeyDown: onKeyDown,
+    onClick: function onClick(event) {
+      return _onClick(event, props.index);
+    },
+    onKeyDown: function onKeyDown(event) {
+      return _onKeyDown(event, props.index);
+    },
     tabIndex: props.tabIndex,
+    'aria-disabled': props.disabled,
     onFocus: onFocus,
     onBlur: onBlur
   }, getPTOptions('button'));
@@ -229,6 +268,10 @@ var SelectButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   var mergeProps = hooks.useMergeProps();
   var context = React__namespace.useContext(api.PrimeReactContext);
   var props = SelectButtonBase.getProps(inProps, context);
+  var _React$useState = React__namespace.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedIndex = _React$useState2[0],
+    setFocusedIndex = _React$useState2[1];
   var elementRef = React__namespace.useRef(null);
   var _SelectButtonBase$set = SelectButtonBase.setMetaData({
       props: props
@@ -301,7 +344,7 @@ var SelectButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       return props.options.map(function (option, index) {
         var isDisabled = props.disabled || isOptionDisabled(option);
         var optionLabel = getOptionLabel(option);
-        var tabIndex = isDisabled ? null : 0;
+        var tabIndex = index === focusedIndex ? '0' : '-1';
         var selected = isSelected(option);
         var key = optionLabel + '_' + index;
         return /*#__PURE__*/React__namespace.createElement(SelectButtonItem, {
@@ -310,13 +353,16 @@ var SelectButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
           label: optionLabel,
           className: option.className,
           option: option,
+          setFocusedIndex: setFocusedIndex,
           onClick: onOptionClick,
           template: props.itemTemplate,
           selected: selected,
           tabIndex: tabIndex,
+          index: index,
           disabled: isDisabled,
           ptm: ptm,
-          cx: cx
+          cx: cx,
+          elementRef: elementRef
         });
       });
     }

package/selectbutton/selectbutton.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/hooks"),r=require("primereact/tooltip"),l=require("primereact/utils"),o=require("primereact/componentbase"),a=require("primereact/ripple");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=i(e);function s(){return s=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},s.apply(this,arguments)}function c(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 c(e)}function d(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 c(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)?c(e,t):void 0}}function f(){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 b(e){return p(e)||d(e)||m(e)||f()}var v=o.ComponentBase.extend({defaultProps:{__TYPE:"SelectButton",id:null,value:null,options:null,optionLabel:null,optionValue:null,optionDisabled:null,tabIndex:null,multiple:!1,unselectable:!0,allowEmpty:!0,disabled:!1,style:null,className:null,dataKey:null,tooltip:null,tooltipOptions:null,itemTemplate:null,onChange:null,children:void 0},css:{classes:{root:function(e){return l.classNames("p-selectbutton p-buttonset p-component",e.props.className)},button:function(e){var t=e.itemProps;return l.classNames("p-button p-component",{"p-highlight":t.selected,"p-disabled":t.disabled,"p-focus":e.focusedState})},label:"p-button-label p-c"}}});function y(e){if(Array.isArray(e))return e}function g(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,o,a,i=[],u=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=o.call(n)).done)&&(i.push(r.value),i.length!==t);u=!0);}catch(e){s=!0,l=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw l}}return i}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var O=u.memo((function(e){var t,r,o,i=u.useState(!1),s=(r=2,y(t=i)||g(t,r)||m(t,r)||h()),c=s[0],p=s[1],d=n.useMergeProps(),f=e.ptm,b=e.cx,v=function(t){return f(t,{hostName:e.hostName,context:{selected:e.selected,disabled:e.disabled,option:e.option}})},O=function(t){e.onClick&&e.onClick({originalEvent:t,option:e.option})},j=(o=d({className:b("label")},v("label")),e.template?l.ObjectUtils.getJSXElement(e.template,e.option):u.createElement("span",o,e.label)),E=d({className:l.classNames(e.className,b("button",{itemProps:e,focusedState:c})),role:"button","aria-label":e.label,"aria-pressed":e.selected,onClick:O,onKeyDown:function(e){32===e.which&&(O(e),e.preventDefault())},tabIndex:e.tabIndex,onFocus:function(){p(!0)},onBlur:function(){p(!1)}},v("button"));return u.createElement("div",E,j,!e.disabled&&u.createElement(a.Ripple,null))}));O.displayName="SelectButtonItem";var j=u.memo(u.forwardRef((function(e,o){var a=n.useMergeProps(),i=u.useContext(t.PrimeReactContext),c=v.getProps(e,i),p=u.useRef(null),d=v.setMetaData({props:c}),m=d.ptm,f=d.cx,y=function(e){if(!c.disabled&&!j(e.option)){var t=E(e.option);if(!t||c.unselectable&&c.allowEmpty){var n,r=h(e.option);if(c.multiple){var o=c.value?b(c.value):[];n=t?o.filter((function(e){return!l.ObjectUtils.equals(e,r,c.dataKey)})):[].concat(b(o),[r])}else n=t?null:r;c.onChange&&c.onChange({originalEvent:e.originalEvent,value:n,stopPropagation:function(){e.originalEvent.stopPropagation()},preventDefault:function(){e.originalEvent.preventDefault()},target:{name:c.name,id:c.id,value:n}})}}},g=function(e){return c.optionLabel?l.ObjectUtils.resolveFieldData(e,c.optionLabel):e&&void 0!==e.label?e.label:e},h=function(e){return c.optionValue?l.ObjectUtils.resolveFieldData(e,c.optionValue):e&&void 0!==e.value?e.value:e},j=function(e){return c.optionDisabled?l.ObjectUtils.isFunction(c.optionDisabled)?c.optionDisabled(e):l.ObjectUtils.resolveFieldData(e,c.optionDisabled):!(!e||void 0===e.disabled)&&e.disabled},E=function(e){var t=h(e);return c.multiple?!(!c.value||!c.value.length)&&c.value.some((function(e){return l.ObjectUtils.equals(e,t,c.dataKey)})):l.ObjectUtils.equals(c.value,t,c.dataKey)};u.useImperativeHandle(o,(function(){return{props:c,focus:function(){return l.DomHandler.focusFirstElement(p.current)},getElement:function(){return p.current}}}));var N=l.ObjectUtils.isNotEmpty(c.tooltip),S=c.options&&c.options.length?c.options.map((function(e,t){var n=c.disabled||j(e),r=g(e),l=n?null:0,o=E(e);return u.createElement(O,{hostName:"SelectButton",key:r+"_"+t,label:r,className:e.className,option:e,onClick:y,template:c.itemTemplate,selected:o,tabIndex:l,disabled:n,ptm:m,cx:f})})):null,D=a({ref:p,id:c.id,className:f("root"),style:c.style,role:"group"},v.getOtherProps(c),m("root"));return u.createElement(u.Fragment,null,u.createElement("div",D,S),N&&u.createElement(r.Tooltip,s({target:p,content:c.tooltip},c.tooltipOptions,{pt:m("tooltip")})))})));j.displayName="SelectButton",exports.SelectButton=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/hooks"),r=require("primereact/tooltip"),l=require("primereact/utils"),o=require("primereact/componentbase"),a=require("primereact/ripple");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=i(e);function c(){return c=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},c.apply(this,arguments)}function s(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 s(e)}function d(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 s(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)?s(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 b(e){return p(e)||d(e)||f(e)||m()}function v(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,l,o,a,i=[],u=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=o.call(n)).done)&&(i.push(r.value),i.length!==t);u=!0);}catch(e){c=!0,l=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw l}}return i}}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.")}function h(e,t){return v(e)||y(e,t)||f(e,t)||g()}var x=o.ComponentBase.extend({defaultProps:{__TYPE:"SelectButton",id:null,value:null,options:null,optionLabel:null,optionValue:null,optionDisabled:null,tabIndex:null,multiple:!1,unselectable:!0,allowEmpty:!0,disabled:!1,style:null,className:null,dataKey:null,tooltip:null,tooltipOptions:null,itemTemplate:null,onChange:null,children:void 0},css:{classes:{root:function(e){return l.classNames("p-selectbutton p-buttonset p-component",e.props.className)},button:function(e){var t=e.itemProps;return l.classNames("p-button p-component",{"p-highlight":t.selected,"p-disabled":t.disabled,"p-focus":e.focusedState})},label:"p-button-label p-c"}}}),O=u.memo((function(e){var t,r=h(u.useState(!1),2),o=r[0],i=r[1],c=n.useMergeProps(),s=e.ptm,p=e.cx,d=function(t){return s(t,{hostName:e.hostName,context:{selected:e.selected,disabled:e.disabled,option:e.option}})},f=function(t,n){e.setFocusedIndex(n),e.onClick&&e.onClick({originalEvent:t,option:e.option})},m=function(e,t){switch(e.code){case"Space":f(e,t),e.preventDefault();break;case"ArrowDown":case"ArrowRight":b(e,"next"),e.preventDefault();break;case"ArrowUp":case"ArrowLeft":b(e,"prev"),e.preventDefault()}},b=function(t,n){for(var r,l,o=0;o<=e.elementRef.current.children.length-1;o++)"0"===e.elementRef.current.children[o].getAttribute("tabindex")&&(r={elem:e.elementRef.current.children[o],index:o});e.setFocusedIndex(l="prev"===n?0===r.index?e.elementRef.current.children.length-1:r.index-1:r.index===e.elementRef.current.children.length-1?0:r.index+1),e.elementRef.current.children[l].focus()},v=(t=c({className:p("label")},d("label")),e.template?l.ObjectUtils.getJSXElement(e.template,e.option):u.createElement("span",t,e.label)),y=c({className:l.classNames(e.className,p("button",{itemProps:e,focusedState:o})),role:"button","aria-label":e.label,"aria-pressed":e.selected,onClick:function(t){return f(t,e.index)},onKeyDown:function(t){return m(t,e.index)},tabIndex:e.tabIndex,"aria-disabled":e.disabled,onFocus:function(){i(!0)},onBlur:function(){i(!1)}},d("button"));return u.createElement("div",y,v,!e.disabled&&u.createElement(a.Ripple,null))}));O.displayName="SelectButtonItem";var j=u.memo(u.forwardRef((function(e,o){var a=n.useMergeProps(),i=u.useContext(t.PrimeReactContext),s=x.getProps(e,i),p=h(u.useState(0),2),d=p[0],f=p[1],m=u.useRef(null),v=x.setMetaData({props:s}),y=v.ptm,g=v.cx,j=function(e){if(!s.disabled&&!w(e.option)){var t=D(e.option);if(!t||s.unselectable&&s.allowEmpty){var n,r=S(e.option);if(s.multiple){var o=s.value?b(s.value):[];n=t?o.filter((function(e){return!l.ObjectUtils.equals(e,r,s.dataKey)})):[].concat(b(o),[r])}else n=t?null:r;s.onChange&&s.onChange({originalEvent:e.originalEvent,value:n,stopPropagation:function(){e.originalEvent.stopPropagation()},preventDefault:function(){e.originalEvent.preventDefault()},target:{name:s.name,id:s.id,value:n}})}}},E=function(e){return s.optionLabel?l.ObjectUtils.resolveFieldData(e,s.optionLabel):e&&void 0!==e.label?e.label:e},S=function(e){return s.optionValue?l.ObjectUtils.resolveFieldData(e,s.optionValue):e&&void 0!==e.value?e.value:e},w=function(e){return s.optionDisabled?l.ObjectUtils.isFunction(s.optionDisabled)?s.optionDisabled(e):l.ObjectUtils.resolveFieldData(e,s.optionDisabled):!(!e||void 0===e.disabled)&&e.disabled},D=function(e){var t=S(e);return s.multiple?!(!s.value||!s.value.length)&&s.value.some((function(e){return l.ObjectUtils.equals(e,t,s.dataKey)})):l.ObjectUtils.equals(s.value,t,s.dataKey)};u.useImperativeHandle(o,(function(){return{props:s,focus:function(){return l.DomHandler.focusFirstElement(m.current)},getElement:function(){return m.current}}}));var N=l.ObjectUtils.isNotEmpty(s.tooltip),P=s.options&&s.options.length?s.options.map((function(e,t){var n=s.disabled||w(e),r=E(e),l=t===d?"0":"-1",o=D(e);return u.createElement(O,{hostName:"SelectButton",key:r+"_"+t,label:r,className:e.className,option:e,setFocusedIndex:f,onClick:j,template:s.itemTemplate,selected:o,tabIndex:l,index:t,disabled:n,ptm:y,cx:g,elementRef:m})})):null,A=a({ref:m,id:s.id,className:g("root"),style:s.style,role:"group"},x.getOtherProps(s),y("root"));return u.createElement(u.Fragment,null,u.createElement("div",A,P),N&&u.createElement(r.Tooltip,c({target:m,content:s.tooltip},s.tooltipOptions,{pt:y("tooltip")})))})));j.displayName="SelectButton",exports.SelectButton=j;

package/selectbutton/selectbutton.esm.js

@@ -53,6 +53,46 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _nonIterableRest() {
+  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 _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 var classes = {
   root: function root(_ref) {
     var props = _ref.props;
@@ -97,46 +137,6 @@ var SelectButtonBase = ComponentBase.extend({
   }
 });
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _nonIterableRest() {
-  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 _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
 var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -155,7 +155,8 @@ var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
       }
     });
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event, index) {
+    props.setFocusedIndex(index);
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
@@ -169,13 +170,46 @@ var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
   var onBlur = function onBlur() {
     setFocusedState(false);
   };
-  var onKeyDown = function onKeyDown(event) {
-    var keyCode = event.which;
-    if (keyCode === 32) {
-      onClick(event);
-      event.preventDefault();
+  var _onKeyDown = function onKeyDown(event, index) {
+    switch (event.code) {
+      case 'Space':
+        {
+          _onClick(event, index);
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowDown':
+      case 'ArrowRight':
+        {
+          changeTabIndexes(event, 'next');
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        {
+          changeTabIndexes(event, 'prev');
+          event.preventDefault();
+          break;
+        }
     }
   };
+  var changeTabIndexes = function changeTabIndexes(event, direction) {
+    var firstTabableChild, index;
+    for (var i = 0; i <= props.elementRef.current.children.length - 1; i++) {
+      if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') firstTabableChild = {
+        elem: props.elementRef.current.children[i],
+        index: i
+      };
+    }
+    if (direction === 'prev') {
+      if (firstTabableChild.index === 0) index = props.elementRef.current.children.length - 1;else index = firstTabableChild.index - 1;
+    } else {
+      if (firstTabableChild.index === props.elementRef.current.children.length - 1) index = 0;else index = firstTabableChild.index + 1;
+    }
+    props.setFocusedIndex(index);
+    props.elementRef.current.children[index].focus();
+  };
   var createContent = function createContent() {
     var labelProps = mergeProps({
       className: cx('label')
@@ -191,9 +225,14 @@ var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
     role: 'button',
     'aria-label': props.label,
     'aria-pressed': props.selected,
-    onClick: onClick,
-    onKeyDown: onKeyDown,
+    onClick: function onClick(event) {
+      return _onClick(event, props.index);
+    },
+    onKeyDown: function onKeyDown(event) {
+      return _onKeyDown(event, props.index);
+    },
     tabIndex: props.tabIndex,
+    'aria-disabled': props.disabled,
     onFocus: onFocus,
     onBlur: onBlur
   }, getPTOptions('button'));
@@ -205,6 +244,10 @@ var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = SelectButtonBase.getProps(inProps, context);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedIndex = _React$useState2[0],
+    setFocusedIndex = _React$useState2[1];
   var elementRef = React.useRef(null);
   var _SelectButtonBase$set = SelectButtonBase.setMetaData({
       props: props
@@ -277,7 +320,7 @@ var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       return props.options.map(function (option, index) {
         var isDisabled = props.disabled || isOptionDisabled(option);
         var optionLabel = getOptionLabel(option);
-        var tabIndex = isDisabled ? null : 0;
+        var tabIndex = index === focusedIndex ? '0' : '-1';
         var selected = isSelected(option);
         var key = optionLabel + '_' + index;
         return /*#__PURE__*/React.createElement(SelectButtonItem, {
@@ -286,13 +329,16 @@ var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
           label: optionLabel,
           className: option.className,
           option: option,
+          setFocusedIndex: setFocusedIndex,
           onClick: onOptionClick,
           template: props.itemTemplate,
           selected: selected,
           tabIndex: tabIndex,
+          index: index,
           disabled: isDisabled,
           ptm: ptm,
-          cx: cx
+          cx: cx,
+          elementRef: elementRef
         });
       });
     }

package/selectbutton/selectbutton.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{useMergeProps as n}from"primereact/hooks";import{Tooltip as o}from"primereact/tooltip";import{classNames as l,ObjectUtils as r,DomHandler as a}from"primereact/utils";import{ComponentBase as i}from"primereact/componentbase";import{Ripple as u}from"primereact/ripple";function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},s.apply(this,arguments)}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function c(e){if(Array.isArray(e))return p(e)}function m(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e,t){if(e){if("string"==typeof e)return p(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)?p(e,t):void 0}}function f(){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 b(e){return c(e)||m(e)||d(e)||f()}var v=i.extend({defaultProps:{__TYPE:"SelectButton",id:null,value:null,options:null,optionLabel:null,optionValue:null,optionDisabled:null,tabIndex:null,multiple:!1,unselectable:!0,allowEmpty:!0,disabled:!1,style:null,className:null,dataKey:null,tooltip:null,tooltipOptions:null,itemTemplate:null,onChange:null,children:void 0},css:{classes:{root:function(e){return l("p-selectbutton p-buttonset p-component",e.props.className)},button:function(e){var t=e.itemProps;return l("p-button p-component",{"p-highlight":t.selected,"p-disabled":t.disabled,"p-focus":e.focusedState})},label:"p-button-label p-c"}}});function y(e){if(Array.isArray(e))return e}function g(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,l,r,a,i=[],u=!0,s=!1;try{if(r=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(o=r.call(n)).done)&&(i.push(o.value),i.length!==t);u=!0);}catch(e){s=!0,l=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw l}}return i}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var E=e.memo((function(t){var o,a,i,s=e.useState(!1),p=(a=2,y(o=s)||g(o,a)||d(o,a)||h()),c=p[0],m=p[1],f=n(),b=t.ptm,v=t.cx,E=function(e){return b(e,{hostName:t.hostName,context:{selected:t.selected,disabled:t.disabled,option:t.option}})},S=function(e){t.onClick&&t.onClick({originalEvent:e,option:t.option})},N=(i=f({className:v("label")},E("label")),t.template?r.getJSXElement(t.template,t.option):e.createElement("span",i,t.label)),D=f({className:l(t.className,v("button",{itemProps:t,focusedState:c})),role:"button","aria-label":t.label,"aria-pressed":t.selected,onClick:S,onKeyDown:function(e){32===e.which&&(S(e),e.preventDefault())},tabIndex:t.tabIndex,onFocus:function(){m(!0)},onBlur:function(){m(!1)}},E("button"));return e.createElement("div",D,N,!t.disabled&&e.createElement(u,null))}));E.displayName="SelectButtonItem";var S=e.memo(e.forwardRef((function(l,i){var u=n(),p=e.useContext(t),c=v.getProps(l,p),m=e.useRef(null),d=v.setMetaData({props:c}),f=d.ptm,y=d.cx,g=function(e){if(!c.disabled&&!N(e.option)){var t=D(e.option);if(!t||c.unselectable&&c.allowEmpty){var n,o=S(e.option);if(c.multiple){var l=c.value?b(c.value):[];n=t?l.filter((function(e){return!r.equals(e,o,c.dataKey)})):[].concat(b(l),[o])}else n=t?null:o;c.onChange&&c.onChange({originalEvent:e.originalEvent,value:n,stopPropagation:function(){e.originalEvent.stopPropagation()},preventDefault:function(){e.originalEvent.preventDefault()},target:{name:c.name,id:c.id,value:n}})}}},h=function(e){return c.optionLabel?r.resolveFieldData(e,c.optionLabel):e&&void 0!==e.label?e.label:e},S=function(e){return c.optionValue?r.resolveFieldData(e,c.optionValue):e&&void 0!==e.value?e.value:e},N=function(e){return c.optionDisabled?r.isFunction(c.optionDisabled)?c.optionDisabled(e):r.resolveFieldData(e,c.optionDisabled):!(!e||void 0===e.disabled)&&e.disabled},D=function(e){var t=S(e);return c.multiple?!(!c.value||!c.value.length)&&c.value.some((function(e){return r.equals(e,t,c.dataKey)})):r.equals(c.value,t,c.dataKey)};e.useImperativeHandle(i,(function(){return{props:c,focus:function(){return a.focusFirstElement(m.current)},getElement:function(){return m.current}}}));var w=r.isNotEmpty(c.tooltip),x=c.options&&c.options.length?c.options.map((function(t,n){var o=c.disabled||N(t),l=h(t),r=o?null:0,a=D(t);return e.createElement(E,{hostName:"SelectButton",key:l+"_"+n,label:l,className:t.className,option:t,onClick:g,template:c.itemTemplate,selected:a,tabIndex:r,disabled:o,ptm:f,cx:y})})):null,I=u({ref:m,id:c.id,className:y("root"),style:c.style,role:"group"},v.getOtherProps(c),f("root"));return e.createElement(e.Fragment,null,e.createElement("div",I,x),w&&e.createElement(o,s({target:m,content:c.tooltip},c.tooltipOptions,{pt:f("tooltip")})))})));S.displayName="SelectButton";export{S as SelectButton};
+import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{useMergeProps as n}from"primereact/hooks";import{Tooltip as r}from"primereact/tooltip";import{classNames as o,ObjectUtils as l,DomHandler as a}from"primereact/utils";import{ComponentBase as i}from"primereact/componentbase";import{Ripple as u}from"primereact/ripple";function c(){return c=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},c.apply(this,arguments)}function s(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 s(e)}function d(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 s(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)?s(e,t):void 0}}function f(){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 b(e){return p(e)||d(e)||m(e)||f()}function v(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,o,l,a,i=[],u=!0,c=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=l.call(n)).done)&&(i.push(r.value),i.length!==t);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw o}}return i}}function h(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){return v(e)||y(e,t)||m(e,t)||h()}var x=i.extend({defaultProps:{__TYPE:"SelectButton",id:null,value:null,options:null,optionLabel:null,optionValue:null,optionDisabled:null,tabIndex:null,multiple:!1,unselectable:!0,allowEmpty:!0,disabled:!1,style:null,className:null,dataKey:null,tooltip:null,tooltipOptions:null,itemTemplate:null,onChange:null,children:void 0},css:{classes:{root:function(e){return o("p-selectbutton p-buttonset p-component",e.props.className)},button:function(e){var t=e.itemProps;return o("p-button p-component",{"p-highlight":t.selected,"p-disabled":t.disabled,"p-focus":e.focusedState})},label:"p-button-label p-c"}}}),E=e.memo((function(t){var r,a=g(e.useState(!1),2),i=a[0],c=a[1],s=n(),p=t.ptm,d=t.cx,m=function(e){return p(e,{hostName:t.hostName,context:{selected:t.selected,disabled:t.disabled,option:t.option}})},f=function(e,n){t.setFocusedIndex(n),t.onClick&&t.onClick({originalEvent:e,option:t.option})},b=function(e,t){switch(e.code){case"Space":f(e,t),e.preventDefault();break;case"ArrowDown":case"ArrowRight":v(e,"next"),e.preventDefault();break;case"ArrowUp":case"ArrowLeft":v(e,"prev"),e.preventDefault()}},v=function(e,n){for(var r,o,l=0;l<=t.elementRef.current.children.length-1;l++)"0"===t.elementRef.current.children[l].getAttribute("tabindex")&&(r={elem:t.elementRef.current.children[l],index:l});t.setFocusedIndex(o="prev"===n?0===r.index?t.elementRef.current.children.length-1:r.index-1:r.index===t.elementRef.current.children.length-1?0:r.index+1),t.elementRef.current.children[o].focus()},y=(r=s({className:d("label")},m("label")),t.template?l.getJSXElement(t.template,t.option):e.createElement("span",r,t.label)),h=s({className:o(t.className,d("button",{itemProps:t,focusedState:i})),role:"button","aria-label":t.label,"aria-pressed":t.selected,onClick:function(e){return f(e,t.index)},onKeyDown:function(e){return b(e,t.index)},tabIndex:t.tabIndex,"aria-disabled":t.disabled,onFocus:function(){c(!0)},onBlur:function(){c(!1)}},m("button"));return e.createElement("div",h,y,!t.disabled&&e.createElement(u,null))}));E.displayName="SelectButtonItem";var S=e.memo(e.forwardRef((function(o,i){var u=n(),s=e.useContext(t),p=x.getProps(o,s),d=g(e.useState(0),2),m=d[0],f=d[1],v=e.useRef(null),y=x.setMetaData({props:p}),h=y.ptm,S=y.cx,w=function(e){if(!p.disabled&&!I(e.option)){var t=N(e.option);if(!t||p.unselectable&&p.allowEmpty){var n,r=A(e.option);if(p.multiple){var o=p.value?b(p.value):[];n=t?o.filter((function(e){return!l.equals(e,r,p.dataKey)})):[].concat(b(o),[r])}else n=t?null:r;p.onChange&&p.onChange({originalEvent:e.originalEvent,value:n,stopPropagation:function(){e.originalEvent.stopPropagation()},preventDefault:function(){e.originalEvent.preventDefault()},target:{name:p.name,id:p.id,value:n}})}}},D=function(e){return p.optionLabel?l.resolveFieldData(e,p.optionLabel):e&&void 0!==e.label?e.label:e},A=function(e){return p.optionValue?l.resolveFieldData(e,p.optionValue):e&&void 0!==e.value?e.value:e},I=function(e){return p.optionDisabled?l.isFunction(p.optionDisabled)?p.optionDisabled(e):l.resolveFieldData(e,p.optionDisabled):!(!e||void 0===e.disabled)&&e.disabled},N=function(e){var t=A(e);return p.multiple?!(!p.value||!p.value.length)&&p.value.some((function(e){return l.equals(e,t,p.dataKey)})):l.equals(p.value,t,p.dataKey)};e.useImperativeHandle(i,(function(){return{props:p,focus:function(){return a.focusFirstElement(v.current)},getElement:function(){return v.current}}}));var O=l.isNotEmpty(p.tooltip),F=p.options&&p.options.length?p.options.map((function(t,n){var r=p.disabled||I(t),o=D(t),l=n===m?"0":"-1",a=N(t);return e.createElement(E,{hostName:"SelectButton",key:o+"_"+n,label:o,className:t.className,option:t,setFocusedIndex:f,onClick:w,template:p.itemTemplate,selected:a,tabIndex:l,index:n,disabled:r,ptm:h,cx:S,elementRef:v})})):null,R=u({ref:v,id:p.id,className:S("root"),style:p.style,role:"group"},x.getOtherProps(p),h("root"));return e.createElement(e.Fragment,null,e.createElement("div",R,F),O&&e.createElement(r,c({target:v,content:p.tooltip},p.tooltipOptions,{pt:h("tooltip")})))})));S.displayName="SelectButton";export{S as SelectButton};