primereact 10.4.0 → 10.5.1

package/inputtextarea/inputtextarea.js

@@ -226,10 +226,9 @@ this.primereact.inputtextarea = (function (exports, React, api, componentbase, h
     }, InputTextareaBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("textarea", rootProps), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
-      content: props.tooltip
-    }, props.tooltipOptions, {
+      content: props.tooltip,
       pt: ptm('tooltip')
-    })));
+    }, props.tooltipOptions)));
   }));
   InputTextarea.displayName = 'InputTextarea';
 

package/inputtextarea/inputtextarea.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.inputtextarea=function(e,t,r,n,o,i,l,a){"use strict";function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=u(t);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(this,arguments)}function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function f(e,t){if("object"!==p(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function y(e){var t=f(e,"string");return"symbol"===p(t)?t:String(t)}var m=n.ComponentBase.extend({defaultProps:{__TYPE:"InputTextarea",__parentMetadata:null,autoResize:!1,keyfilter:null,onBlur:null,onFocus:null,onBeforeInput:null,onInput:null,onKeyDown:null,onKeyUp:null,onPaste:null,tooltip:null,tooltipOptions:null,validateOnly:!1,children:void 0},css:{classes:{root:function(e){var t=e.props;return a.classNames("p-inputtextarea p-inputtext p-component",{"p-disabled":t.disabled,"p-filled":e.isFilled,"p-inputtextarea-resizable":t.autoResize},t.className)}},styles:"\n@layer primereact {\n    .p-inputtextarea-resizable {\n        overflow: hidden;\n        resize: none;\n    }\n    \n    .p-fluid .p-inputtextarea {\n        width: 100%;\n    }\n}\n"}});function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){var n,o,i;n=e,i=r[t],(o=y(o=t))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var v=s.memo(s.forwardRef((function(e,t){var u=o.useMergeProps(),p=s.useContext(r.PrimeReactContext),f=m.getProps(e,p),y=s.useRef(t),b=s.useRef(0),v=m.setMetaData(d(d({props:f},f.__parentMetadata),{},{context:{disabled:f.disabled}})),O=v.ptm,g=v.cx;n.useHandleStyle(m.css.styles,v.isUnstyled,{name:"inputtextarea"});var h=function(e){var t=y.current;t&&a.DomHandler.isVisible(t)&&(b.current||(b.current=t.scrollHeight,t.style.overflow="hidden"),(b.current!==t.scrollHeight||e)&&(t.style.height="",t.style.height=t.scrollHeight+"px",parseFloat(t.style.height)>=parseFloat(t.style.maxHeight)?(t.style.overflowY="scroll",t.style.height=t.style.maxHeight):t.style.overflow="hidden",b.current=t.scrollHeight))};s.useEffect((function(){a.ObjectUtils.combinedRefs(y,t)}),[y,t]),s.useEffect((function(){f.autoResize&&h(!0)}),[f.autoResize]);var j=s.useMemo((function(){return a.ObjectUtils.isNotEmpty(f.value)||a.ObjectUtils.isNotEmpty(f.defaultValue)}),[f.value,f.defaultValue]),P=a.ObjectUtils.isNotEmpty(f.tooltip),w=u({ref:y,className:g("root",{isFilled:j}),onFocus:function(e){f.autoResize&&h(),f.onFocus&&f.onFocus(e)},onBlur:function(e){f.autoResize&&h(),f.onBlur&&f.onBlur(e)},onKeyUp:function(e){f.autoResize&&h(),f.onKeyUp&&f.onKeyUp(e)},onKeyDown:function(e){f.onKeyDown&&f.onKeyDown(e),f.keyfilter&&i.KeyFilter.onKeyPress(e,f.keyfilter,f.validateOnly)},onBeforeInput:function(e){f.onBeforeInput&&f.onBeforeInput(e),f.keyfilter&&i.KeyFilter.onBeforeInput(e,f.keyfilter,f.validateOnly)},onInput:function(e){var t=e.target;f.autoResize&&h(a.ObjectUtils.isEmpty(t.value)),f.onInput&&f.onInput(e),a.ObjectUtils.isNotEmpty(t.value)?a.DomHandler.addClass(t,"p-filled"):a.DomHandler.removeClass(t,"p-filled")},onPaste:function(e){f.onPaste&&f.onPaste(e),f.keyfilter&&i.KeyFilter.onPaste(e,f.keyfilter,f.validateOnly)}},m.getOtherProps(f),O("root"));return s.createElement(s.Fragment,null,s.createElement("textarea",w),P&&s.createElement(l.Tooltip,c({target:y,content:f.tooltip},f.tooltipOptions,{pt:O("tooltip")})))})));return v.displayName="InputTextarea",e.InputTextarea=v,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.keyfilter,primereact.tooltip,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.inputtextarea=function(e,t,r,n,o,i,l,a){"use strict";function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=u(t);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(this,arguments)}function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function f(e,t){if("object"!==p(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==p(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function y(e){var t=f(e,"string");return"symbol"===p(t)?t:String(t)}var m=n.ComponentBase.extend({defaultProps:{__TYPE:"InputTextarea",__parentMetadata:null,autoResize:!1,keyfilter:null,onBlur:null,onFocus:null,onBeforeInput:null,onInput:null,onKeyDown:null,onKeyUp:null,onPaste:null,tooltip:null,tooltipOptions:null,validateOnly:!1,children:void 0},css:{classes:{root:function(e){var t=e.props;return a.classNames("p-inputtextarea p-inputtext p-component",{"p-disabled":t.disabled,"p-filled":e.isFilled,"p-inputtextarea-resizable":t.autoResize},t.className)}},styles:"\n@layer primereact {\n    .p-inputtextarea-resizable {\n        overflow: hidden;\n        resize: none;\n    }\n    \n    .p-fluid .p-inputtextarea {\n        width: 100%;\n    }\n}\n"}});function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){var n,o,i;n=e,i=r[t],(o=y(o=t))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var v=s.memo(s.forwardRef((function(e,t){var u=o.useMergeProps(),p=s.useContext(r.PrimeReactContext),f=m.getProps(e,p),y=s.useRef(t),b=s.useRef(0),v=m.setMetaData(d(d({props:f},f.__parentMetadata),{},{context:{disabled:f.disabled}})),O=v.ptm,g=v.cx;n.useHandleStyle(m.css.styles,v.isUnstyled,{name:"inputtextarea"});var h=function(e){var t=y.current;t&&a.DomHandler.isVisible(t)&&(b.current||(b.current=t.scrollHeight,t.style.overflow="hidden"),(b.current!==t.scrollHeight||e)&&(t.style.height="",t.style.height=t.scrollHeight+"px",parseFloat(t.style.height)>=parseFloat(t.style.maxHeight)?(t.style.overflowY="scroll",t.style.height=t.style.maxHeight):t.style.overflow="hidden",b.current=t.scrollHeight))};s.useEffect((function(){a.ObjectUtils.combinedRefs(y,t)}),[y,t]),s.useEffect((function(){f.autoResize&&h(!0)}),[f.autoResize]);var j=s.useMemo((function(){return a.ObjectUtils.isNotEmpty(f.value)||a.ObjectUtils.isNotEmpty(f.defaultValue)}),[f.value,f.defaultValue]),P=a.ObjectUtils.isNotEmpty(f.tooltip),w=u({ref:y,className:g("root",{isFilled:j}),onFocus:function(e){f.autoResize&&h(),f.onFocus&&f.onFocus(e)},onBlur:function(e){f.autoResize&&h(),f.onBlur&&f.onBlur(e)},onKeyUp:function(e){f.autoResize&&h(),f.onKeyUp&&f.onKeyUp(e)},onKeyDown:function(e){f.onKeyDown&&f.onKeyDown(e),f.keyfilter&&i.KeyFilter.onKeyPress(e,f.keyfilter,f.validateOnly)},onBeforeInput:function(e){f.onBeforeInput&&f.onBeforeInput(e),f.keyfilter&&i.KeyFilter.onBeforeInput(e,f.keyfilter,f.validateOnly)},onInput:function(e){var t=e.target;f.autoResize&&h(a.ObjectUtils.isEmpty(t.value)),f.onInput&&f.onInput(e),a.ObjectUtils.isNotEmpty(t.value)?a.DomHandler.addClass(t,"p-filled"):a.DomHandler.removeClass(t,"p-filled")},onPaste:function(e){f.onPaste&&f.onPaste(e),f.keyfilter&&i.KeyFilter.onPaste(e,f.keyfilter,f.validateOnly)}},m.getOtherProps(f),O("root"));return s.createElement(s.Fragment,null,s.createElement("textarea",w),P&&s.createElement(l.Tooltip,c({target:y,content:f.tooltip,pt:O("tooltip")},f.tooltipOptions)))})));return v.displayName="InputTextarea",e.InputTextarea=v,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.keyfilter,primereact.tooltip,primereact.utils);

package/knob/knob.cjs.js

@@ -95,6 +95,7 @@ var KnobBase = componentbase.ComponentBase.extend({
     disabled: false,
     readOnly: false,
     showValue: true,
+    tabIndex: 0,
     step: 1,
     min: 0,
     max: 100,
@@ -258,6 +259,15 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       });
     }
   };
+  var updateModelValue = function updateModelValue(newValue) {
+    var currentValue;
+    if (newValue > props.max) currentValue = props.max;else if (newValue < props.min) currentValue = props.min;else currentValue = newValue;
+    if (props.onChange) {
+      props.onChange({
+        value: currentValue
+      });
+    }
+  };
   var _onClick = function onClick(event) {
     if (!props.disabled && !props.readOnly) {
       updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
@@ -280,6 +290,48 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     unbindWindowTouchMoveListener();
     unbindWindowTouchEndListener();
   };
+  var _onKeyDown = function onKeyDown(event) {
+    if (!props.disabled && !props.readonly) {
+      switch (event.code) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          event.preventDefault();
+          updateModelValue(props.value + 1);
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          {
+            event.preventDefault();
+            updateModelValue(props.value - 1);
+            break;
+          }
+        case 'Home':
+          {
+            event.preventDefault();
+            updateModelValue(props.min);
+            break;
+          }
+        case 'End':
+          {
+            event.preventDefault();
+            updateModelValue(props.max);
+            break;
+          }
+        case 'PageUp':
+          {
+            event.preventDefault();
+            updateModelValue(props.value + 10);
+            break;
+          }
+        case 'PageDown':
+          {
+            event.preventDefault();
+            updateModelValue(props.value - 10);
+            break;
+          }
+      }
+    }
+  };
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -307,6 +359,13 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     viewBox: '0 0 100 100',
     width: props.size,
     height: props.size,
+    'aria-valuemin': props.min,
+    'aria-valuemax': props.max,
+    'aria-valuenow': props.value,
+    'aria-labelledby': props.ariaLabelledby,
+    'aria-label': props.ariaLabel,
+    role: 'slider',
+    tabIndex: props.readonly || props.disabled ? -1 : props.tabIndex,
     onClick: function onClick(e) {
       return _onClick(e);
     },
@@ -321,6 +380,9 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     },
     onTouchEnd: function onTouchEnd(e) {
       return _onTouchEnd();
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown(e);
     }
   }, ptm('svg'));
   var rangeProps = mergeProps({

package/knob/knob.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),r=require("primereact/hooks"),a=require("primereact/utils");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=o(e);function l(e){if(Array.isArray(e))return e}function s(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],s=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);s=!0);}catch(e){u=!0,a=e}finally{try{if(!s&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw a}}return l}}function u(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 c(e,t){if(e){if("string"==typeof e)return u(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)?u(e,t):void 0}}function f(){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 m(e,t){return l(e)||s(e,t)||c(e,t)||f()}var d=n.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){var t=e.props;return a.classNames("p-knob p-component",{"p-disabled":t.disabled},t.className)}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),v=40,p=4*Math.PI/3,h=-Math.PI/3,y=i.memo(i.forwardRef((function(e,a){var o=r.useMergeProps(),l=i.useContext(t.PrimeReactContext),s=d.getProps(e,l),u=d.setMetaData({props:s}),c=u.ptm,f=u.cx;n.useHandleStyle(d.css.styles,u.isUnstyled,{name:"knob"});var y=i.useRef(null),b=!s.disabled&&!s.readOnly,g=m(r.useEventListener({target:"window",type:"mousemove",listener:function(e){_(e.offsetX,e.offsetY),e.preventDefault()},when:b}),2),M=g[0],w=g[1],k=m(r.useEventListener({target:"window",type:"mouseup",listener:function(e){w(),E(),e.preventDefault()},when:b}),2),x=k[0],E=k[1],C=m(r.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=y.current.getBoundingClientRect(),n=e.targetTouches.item(0);_(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:b}),2),O=C[0],P=C[1],j=m(r.useEventListener({target:"window",type:"touchend",listener:function(){P(),A()},when:b}),2),I=j[0],A=j[1],N=function(e,t,n,r,a){return(e-t)*(a-r)/(n-t)+r},S=function(){return N(s.min>0&&s.max>0?s.min:0,s.min,s.max,p,h)},z=function(){return N(s.value,s.min,s.max,p,h)},D="M ".concat(50+Math.cos(p)*v," ").concat(50-Math.sin(p)*v," A ").concat(v," ").concat(v," 0 1 1 ").concat(50+Math.cos(h)*v," ").concat(50-Math.sin(h)*v),T="M ".concat(50+Math.cos(S())*v," ").concat(50-Math.sin(S())*v," A ").concat(v," ").concat(v," 0 ").concat(Math.abs(S()-z())<Math.PI?0:1," ").concat(z()>S()?0:1," ").concat(50+Math.cos(z())*v," ").concat(50-Math.sin(z())*v),_=function(e,t){var n=Math.atan2(s.size/2-t,e-s.size/2),r=-Math.PI/2-Math.PI/6;q(n,r)},q=function(e,t){var n;if(e>h)n=N(e,p,h,s.min,s.max);else{if(!(e<t))return;n=N(e+2*Math.PI,p,h,s.min,s.max)}s.onChange&&s.onChange({value:Math.round((n-s.min)/s.step)*s.step+s.min})};i.useImperativeHandle(a,(function(){return{props:s,getElement:function(){return y.current}}}));var B=o({x:50,y:57,textAnchor:"middle",fill:s.textColor,className:f("label"),name:s.name},c("label")),L=s.showValue&&i.createElement("text",B,s.valueTemplate.replace("{value}",s.value.toString())),W=o({ref:y,id:s.id,className:f("root"),style:s.style},c("root")),R=o({viewBox:"0 0 100 100",width:s.size,height:s.size,onClick:function(e){return t=e,void(s.disabled||s.readOnly||_(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,M(),x(),void t.preventDefault();var t},onMouseUp:function(e){return w(),void E()},onTouchStart:function(e){return O(),void I()},onTouchEnd:function(e){return P(),void A()}},c("svg")),Y=o({d:D,strokeWidth:s.strokeWidth,stroke:s.rangeColor,className:f("range")},c("range")),K=o({d:T,strokeWidth:s.strokeWidth,stroke:s.valueColor,className:f("value")},c("value"));return i.createElement("div",W,i.createElement("svg",R,i.createElement("path",Y),i.createElement("path",K),L))})));y.displayName="Knob",exports.Knob=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),a=require("primereact/hooks"),r=require("primereact/utils");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l=o(e);function i(e){if(Array.isArray(e))return e}function u(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,l,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=(a=o.call(n)).done)&&(i.push(a.value),i.length!==t);u=!0);}catch(e){s=!0,r=e}finally{try{if(!u&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw r}}return i}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function c(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 destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function d(e,t){return i(e)||u(e,t)||c(e,t)||f()}var m=n.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,tabIndex:0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){var t=e.props;return r.classNames("p-knob p-component",{"p-disabled":t.disabled},t.className)}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),v=40,p=4*Math.PI/3,h=-Math.PI/3,b=l.memo(l.forwardRef((function(e,r){var o=a.useMergeProps(),i=l.useContext(t.PrimeReactContext),u=m.getProps(e,i),s=m.setMetaData({props:u}),c=s.ptm,f=s.cx;n.useHandleStyle(m.css.styles,s.isUnstyled,{name:"knob"});var b=l.useRef(null),y=!u.disabled&&!u.readOnly,g=d(a.useEventListener({target:"window",type:"mousemove",listener:function(e){T(e.offsetX,e.offsetY),e.preventDefault()},when:y}),2),w=g[0],x=g[1],k=d(a.useEventListener({target:"window",type:"mouseup",listener:function(e){x(),C(),e.preventDefault()},when:y}),2),M=k[0],C=k[1],E=d(a.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=b.current.getBoundingClientRect(),n=e.targetTouches.item(0);T(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:y}),2),D=E[0],P=E[1],O=d(a.useEventListener({target:"window",type:"touchend",listener:function(){P(),I()},when:y}),2),A=O[0],I=O[1],j=function(e,t,n,a,r){return(e-t)*(r-a)/(n-t)+a},L=function(){return j(u.min>0&&u.max>0?u.min:0,u.min,u.max,p,h)},N=function(){return j(u.value,u.min,u.max,p,h)},S="M ".concat(50+Math.cos(p)*v," ").concat(50-Math.sin(p)*v," A ").concat(v," ").concat(v," 0 1 1 ").concat(50+Math.cos(h)*v," ").concat(50-Math.sin(h)*v),z="M ".concat(50+Math.cos(L())*v," ").concat(50-Math.sin(L())*v," A ").concat(v," ").concat(v," 0 ").concat(Math.abs(L()-N())<Math.PI?0:1," ").concat(N()>L()?0:1," ").concat(50+Math.cos(N())*v," ").concat(50-Math.sin(N())*v),T=function(e,t){var n=Math.atan2(u.size/2-t,e-u.size/2),a=-Math.PI/2-Math.PI/6;_(n,a)},_=function(e,t){var n;if(e>h)n=j(e,p,h,u.min,u.max);else{if(!(e<t))return;n=j(e+2*Math.PI,p,h,u.min,u.max)}u.onChange&&u.onChange({value:Math.round((n-u.min)/u.step)*u.step+u.min})},q=function(e){var t;t=e>u.max?u.max:e<u.min?u.min:e,u.onChange&&u.onChange({value:t})},B=function(e){if(!u.disabled&&!u.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),q(u.value+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),q(u.value-1);break;case"Home":e.preventDefault(),q(u.min);break;case"End":e.preventDefault(),q(u.max);break;case"PageUp":e.preventDefault(),q(u.value+10);break;case"PageDown":e.preventDefault(),q(u.value-10)}};l.useImperativeHandle(r,(function(){return{props:u,getElement:function(){return b.current}}}));var R=o({x:50,y:57,textAnchor:"middle",fill:u.textColor,className:f("label"),name:u.name},c("label")),U=u.showValue&&l.createElement("text",R,u.valueTemplate.replace("{value}",u.value.toString())),W=o({ref:b,id:u.id,className:f("root"),style:u.style},c("root")),K=o({viewBox:"0 0 100 100",width:u.size,height:u.size,"aria-valuemin":u.min,"aria-valuemax":u.max,"aria-valuenow":u.value,"aria-labelledby":u.ariaLabelledby,"aria-label":u.ariaLabel,role:"slider",tabIndex:u.readonly||u.disabled?-1:u.tabIndex,onClick:function(e){return t=e,void(u.disabled||u.readOnly||T(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,w(),M(),void t.preventDefault();var t},onMouseUp:function(e){return x(),void C()},onTouchStart:function(e){return D(),void A()},onTouchEnd:function(e){return P(),void I()},onKeyDown:function(e){return B(e)}},c("svg")),Y=o({d:S,strokeWidth:u.strokeWidth,stroke:u.rangeColor,className:f("range")},c("range")),H=o({d:z,strokeWidth:u.strokeWidth,stroke:u.valueColor,className:f("value")},c("value"));return l.createElement("div",W,l.createElement("svg",K,l.createElement("path",Y),l.createElement("path",H),U))})));b.displayName="Knob",exports.Knob=b;

package/knob/knob.esm.js

@@ -71,6 +71,7 @@ var KnobBase = ComponentBase.extend({
     disabled: false,
     readOnly: false,
     showValue: true,
+    tabIndex: 0,
     step: 1,
     min: 0,
     max: 100,
@@ -234,6 +235,15 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       });
     }
   };
+  var updateModelValue = function updateModelValue(newValue) {
+    var currentValue;
+    if (newValue > props.max) currentValue = props.max;else if (newValue < props.min) currentValue = props.min;else currentValue = newValue;
+    if (props.onChange) {
+      props.onChange({
+        value: currentValue
+      });
+    }
+  };
   var _onClick = function onClick(event) {
     if (!props.disabled && !props.readOnly) {
       updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
@@ -256,6 +266,48 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     unbindWindowTouchMoveListener();
     unbindWindowTouchEndListener();
   };
+  var _onKeyDown = function onKeyDown(event) {
+    if (!props.disabled && !props.readonly) {
+      switch (event.code) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          event.preventDefault();
+          updateModelValue(props.value + 1);
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          {
+            event.preventDefault();
+            updateModelValue(props.value - 1);
+            break;
+          }
+        case 'Home':
+          {
+            event.preventDefault();
+            updateModelValue(props.min);
+            break;
+          }
+        case 'End':
+          {
+            event.preventDefault();
+            updateModelValue(props.max);
+            break;
+          }
+        case 'PageUp':
+          {
+            event.preventDefault();
+            updateModelValue(props.value + 10);
+            break;
+          }
+        case 'PageDown':
+          {
+            event.preventDefault();
+            updateModelValue(props.value - 10);
+            break;
+          }
+      }
+    }
+  };
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -283,6 +335,13 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     viewBox: '0 0 100 100',
     width: props.size,
     height: props.size,
+    'aria-valuemin': props.min,
+    'aria-valuemax': props.max,
+    'aria-valuenow': props.value,
+    'aria-labelledby': props.ariaLabelledby,
+    'aria-label': props.ariaLabel,
+    role: 'slider',
+    tabIndex: props.readonly || props.disabled ? -1 : props.tabIndex,
     onClick: function onClick(e) {
       return _onClick(e);
     },
@@ -297,6 +356,9 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     },
     onTouchEnd: function onTouchEnd(e) {
       return _onTouchEnd();
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown(e);
     }
   }, ptm('svg'));
   var rangeProps = mergeProps({

package/knob/knob.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{useMergeProps as a,useEventListener as o}from"primereact/hooks";import{classNames as i}from"primereact/utils";function l(e){if(Array.isArray(e))return e}function c(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],c=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw a}}return l}}function 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 u(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 destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function f(e,t){return l(e)||c(e,t)||u(e,t)||m()}var d=n.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){var t=e.props;return i("p-knob p-component",{"p-disabled":t.disabled},t.className)}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),p=40,h=4*Math.PI/3,v=-Math.PI/3,y=e.memo(e.forwardRef((function(n,i){var l=a(),c=e.useContext(t),s=d.getProps(n,c),u=d.setMetaData({props:s}),m=u.ptm,y=u.cx;r(d.css.styles,u.isUnstyled,{name:"knob"});var b=e.useRef(null),g=!s.disabled&&!s.readOnly,w=f(o({target:"window",type:"mousemove",listener:function(e){B(e.offsetX,e.offsetY),e.preventDefault()},when:g}),2),M=w[0],k=w[1],x=f(o({target:"window",type:"mouseup",listener:function(e){k(),E(),e.preventDefault()},when:g}),2),C=x[0],E=x[1],I=f(o({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=b.current.getBoundingClientRect(),n=e.targetTouches.item(0);B(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:g}),2),A=I[0],P=I[1],N=f(o({target:"window",type:"touchend",listener:function(){P(),S()},when:g}),2),O=N[0],S=N[1],T=function(e,t,n,r,a){return(e-t)*(a-r)/(n-t)+r},z=function(){return T(s.min>0&&s.max>0?s.min:0,s.min,s.max,h,v)},D=function(){return T(s.value,s.min,s.max,h,v)},j="M ".concat(50+Math.cos(h)*p," ").concat(50-Math.sin(h)*p," A ").concat(p," ").concat(p," 0 1 1 ").concat(50+Math.cos(v)*p," ").concat(50-Math.sin(v)*p),W="M ".concat(50+Math.cos(z())*p," ").concat(50-Math.sin(z())*p," A ").concat(p," ").concat(p," 0 ").concat(Math.abs(z()-D())<Math.PI?0:1," ").concat(D()>z()?0:1," ").concat(50+Math.cos(D())*p," ").concat(50-Math.sin(D())*p),B=function(e,t){var n=Math.atan2(s.size/2-t,e-s.size/2),r=-Math.PI/2-Math.PI/6;Y(n,r)},Y=function(e,t){var n;if(e>v)n=T(e,h,v,s.min,s.max);else{if(!(e<t))return;n=T(e+2*Math.PI,h,v,s.min,s.max)}s.onChange&&s.onChange({value:Math.round((n-s.min)/s.step)*s.step+s.min})};e.useImperativeHandle(i,(function(){return{props:s,getElement:function(){return b.current}}}));var R=l({x:50,y:57,textAnchor:"middle",fill:s.textColor,className:y("label"),name:s.name},m("label")),U=s.showValue&&e.createElement("text",R,s.valueTemplate.replace("{value}",s.value.toString())),X=l({ref:b,id:s.id,className:y("root"),style:s.style},m("root")),K=l({viewBox:"0 0 100 100",width:s.size,height:s.size,onClick:function(e){return t=e,void(s.disabled||s.readOnly||B(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,M(),C(),void t.preventDefault();var t},onMouseUp:function(e){return k(),void E()},onTouchStart:function(e){return A(),void O()},onTouchEnd:function(e){return P(),void S()}},m("svg")),V=l({d:j,strokeWidth:s.strokeWidth,stroke:s.rangeColor,className:y("range")},m("range")),_=l({d:W,strokeWidth:s.strokeWidth,stroke:s.valueColor,className:y("value")},m("value"));return e.createElement("div",X,e.createElement("svg",K,e.createElement("path",V),e.createElement("path",_),U))})));y.displayName="Knob";export{y as Knob};
+import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as a}from"primereact/componentbase";import{useMergeProps as r,useEventListener as o}from"primereact/hooks";import{classNames as l}from"primereact/utils";function i(e){if(Array.isArray(e))return e}function c(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,l,i=[],c=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(a=o.call(n)).done)&&(i.push(a.value),i.length!==t);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw r}}return i}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function u(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 destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function f(e,t){return i(e)||c(e,t)||u(e,t)||m()}var d=n.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,tabIndex:0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){var t=e.props;return l("p-knob p-component",{"p-disabled":t.disabled},t.className)}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),v=40,p=4*Math.PI/3,h=-Math.PI/3,b=e.memo(e.forwardRef((function(n,l){var i=r(),c=e.useContext(t),s=d.getProps(n,c),u=d.setMetaData({props:s}),m=u.ptm,b=u.cx;a(d.css.styles,u.isUnstyled,{name:"knob"});var y=e.useRef(null),g=!s.disabled&&!s.readOnly,w=f(o({target:"window",type:"mousemove",listener:function(e){W(e.offsetX,e.offsetY),e.preventDefault()},when:g}),2),x=w[0],k=w[1],M=f(o({target:"window",type:"mouseup",listener:function(e){k(),D(),e.preventDefault()},when:g}),2),C=M[0],D=M[1],A=f(o({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=y.current.getBoundingClientRect(),n=e.targetTouches.item(0);W(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:g}),2),I=A[0],E=A[1],P=f(o({target:"window",type:"touchend",listener:function(){E(),O()},when:g}),2),N=P[0],O=P[1],S=function(e,t,n,a,r){return(e-t)*(r-a)/(n-t)+a},T=function(){return S(s.min>0&&s.max>0?s.min:0,s.min,s.max,p,h)},z=function(){return S(s.value,s.min,s.max,p,h)},j="M ".concat(50+Math.cos(p)*v," ").concat(50-Math.sin(p)*v," A ").concat(v," ").concat(v," 0 1 1 ").concat(50+Math.cos(h)*v," ").concat(50-Math.sin(h)*v),U="M ".concat(50+Math.cos(T())*v," ").concat(50-Math.sin(T())*v," A ").concat(v," ").concat(v," 0 ").concat(Math.abs(T()-z())<Math.PI?0:1," ").concat(z()>T()?0:1," ").concat(50+Math.cos(z())*v," ").concat(50-Math.sin(z())*v),W=function(e,t){var n=Math.atan2(s.size/2-t,e-s.size/2),a=-Math.PI/2-Math.PI/6;B(n,a)},B=function(e,t){var n;if(e>h)n=S(e,p,h,s.min,s.max);else{if(!(e<t))return;n=S(e+2*Math.PI,p,h,s.min,s.max)}s.onChange&&s.onChange({value:Math.round((n-s.min)/s.step)*s.step+s.min})},L=function(e){var t;t=e>s.max?s.max:e<s.min?s.min:e,s.onChange&&s.onChange({value:t})},R=function(e){if(!s.disabled&&!s.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),L(s.value+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),L(s.value-1);break;case"Home":e.preventDefault(),L(s.min);break;case"End":e.preventDefault(),L(s.max);break;case"PageUp":e.preventDefault(),L(s.value+10);break;case"PageDown":e.preventDefault(),L(s.value-10)}};e.useImperativeHandle(l,(function(){return{props:s,getElement:function(){return y.current}}}));var Y=i({x:50,y:57,textAnchor:"middle",fill:s.textColor,className:b("label"),name:s.name},m("label")),K=s.showValue&&e.createElement("text",Y,s.valueTemplate.replace("{value}",s.value.toString())),X=i({ref:y,id:s.id,className:b("root"),style:s.style},m("root")),H=i({viewBox:"0 0 100 100",width:s.size,height:s.size,"aria-valuemin":s.min,"aria-valuemax":s.max,"aria-valuenow":s.value,"aria-labelledby":s.ariaLabelledby,"aria-label":s.ariaLabel,role:"slider",tabIndex:s.readonly||s.disabled?-1:s.tabIndex,onClick:function(e){return t=e,void(s.disabled||s.readOnly||W(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,x(),C(),void t.preventDefault();var t},onMouseUp:function(e){return k(),void D()},onTouchStart:function(e){return I(),void N()},onTouchEnd:function(e){return E(),void O()},onKeyDown:function(e){return R(e)}},m("svg")),V=i({d:j,strokeWidth:s.strokeWidth,stroke:s.rangeColor,className:b("range")},m("range")),_=i({d:U,strokeWidth:s.strokeWidth,stroke:s.valueColor,className:b("value")},m("value"));return e.createElement("div",X,e.createElement("svg",H,e.createElement("path",V),e.createElement("path",_),K))})));b.displayName="Knob";export{b as Knob};

package/knob/knob.js

@@ -88,6 +88,7 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
       disabled: false,
       readOnly: false,
       showValue: true,
+      tabIndex: 0,
       step: 1,
       min: 0,
       max: 100,
@@ -251,6 +252,15 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
         });
       }
     };
+    var updateModelValue = function updateModelValue(newValue) {
+      var currentValue;
+      if (newValue > props.max) currentValue = props.max;else if (newValue < props.min) currentValue = props.min;else currentValue = newValue;
+      if (props.onChange) {
+        props.onChange({
+          value: currentValue
+        });
+      }
+    };
     var _onClick = function onClick(event) {
       if (!props.disabled && !props.readOnly) {
         updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
@@ -273,6 +283,48 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
       unbindWindowTouchMoveListener();
       unbindWindowTouchEndListener();
     };
+    var _onKeyDown = function onKeyDown(event) {
+      if (!props.disabled && !props.readonly) {
+        switch (event.code) {
+          case 'ArrowRight':
+          case 'ArrowUp':
+            event.preventDefault();
+            updateModelValue(props.value + 1);
+            break;
+          case 'ArrowLeft':
+          case 'ArrowDown':
+            {
+              event.preventDefault();
+              updateModelValue(props.value - 1);
+              break;
+            }
+          case 'Home':
+            {
+              event.preventDefault();
+              updateModelValue(props.min);
+              break;
+            }
+          case 'End':
+            {
+              event.preventDefault();
+              updateModelValue(props.max);
+              break;
+            }
+          case 'PageUp':
+            {
+              event.preventDefault();
+              updateModelValue(props.value + 10);
+              break;
+            }
+          case 'PageDown':
+            {
+              event.preventDefault();
+              updateModelValue(props.value - 10);
+              break;
+            }
+        }
+      }
+    };
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
@@ -300,6 +352,13 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
       viewBox: '0 0 100 100',
       width: props.size,
       height: props.size,
+      'aria-valuemin': props.min,
+      'aria-valuemax': props.max,
+      'aria-valuenow': props.value,
+      'aria-labelledby': props.ariaLabelledby,
+      'aria-label': props.ariaLabel,
+      role: 'slider',
+      tabIndex: props.readonly || props.disabled ? -1 : props.tabIndex,
       onClick: function onClick(e) {
         return _onClick(e);
       },
@@ -314,6 +373,9 @@ this.primereact.knob = (function (exports, React, api, componentbase, hooks, uti
       },
       onTouchEnd: function onTouchEnd(e) {
         return _onTouchEnd();
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
       }
     }, ptm('svg'));
     var rangeProps = mergeProps({

package/knob/knob.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.knob=function(e,t,n,r,a,o){"use strict";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 l=i(t);function s(e){if(Array.isArray(e))return e}function c(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],s=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw a}}return l}}function u(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 f(e,t){if(e){if("string"==typeof e)return u(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)?u(e,t):void 0}}function m(){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 d(e,t){return s(e)||c(e,t)||f(e,t)||m()}var p=r.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){var t=e.props;return o.classNames("p-knob p-component",{"p-disabled":t.disabled},t.className)}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),v=40,h=4*Math.PI/3,y=-Math.PI/3,b=l.memo(l.forwardRef((function(e,t){var o=a.useMergeProps(),i=l.useContext(n.PrimeReactContext),s=p.getProps(e,i),c=p.setMetaData({props:s}),u=c.ptm,f=c.cx;r.useHandleStyle(p.css.styles,c.isUnstyled,{name:"knob"});var m=l.useRef(null),b=!s.disabled&&!s.readOnly,g=d(a.useEventListener({target:"window",type:"mousemove",listener:function(e){_(e.offsetX,e.offsetY),e.preventDefault()},when:b}),2),M=g[0],k=g[1],w=d(a.useEventListener({target:"window",type:"mouseup",listener:function(e){k(),E(),e.preventDefault()},when:b}),2),x=w[0],E=w[1],C=d(a.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=m.current.getBoundingClientRect(),n=e.targetTouches.item(0);_(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:b}),2),O=C[0],P=C[1],j=d(a.useEventListener({target:"window",type:"touchend",listener:function(){P(),A()},when:b}),2),I=j[0],A=j[1],N=function(e,t,n,r,a){return(e-t)*(a-r)/(n-t)+r},S=function(){return N(s.min>0&&s.max>0?s.min:0,s.min,s.max,h,y)},z=function(){return N(s.value,s.min,s.max,h,y)},D="M ".concat(50+Math.cos(h)*v," ").concat(50-Math.sin(h)*v," A ").concat(v," ").concat(v," 0 1 1 ").concat(50+Math.cos(y)*v," ").concat(50-Math.sin(y)*v),T="M ".concat(50+Math.cos(S())*v," ").concat(50-Math.sin(S())*v," A ").concat(v," ").concat(v," 0 ").concat(Math.abs(S()-z())<Math.PI?0:1," ").concat(z()>S()?0:1," ").concat(50+Math.cos(z())*v," ").concat(50-Math.sin(z())*v),_=function(e,t){var n=Math.atan2(s.size/2-t,e-s.size/2),r=-Math.PI/2-Math.PI/6;B(n,r)},B=function(e,t){var n;if(e>y)n=N(e,h,y,s.min,s.max);else{if(!(e<t))return;n=N(e+2*Math.PI,h,y,s.min,s.max)}s.onChange&&s.onChange({value:Math.round((n-s.min)/s.step)*s.step+s.min})};l.useImperativeHandle(t,(function(){return{props:s,getElement:function(){return m.current}}}));var L=o({x:50,y:57,textAnchor:"middle",fill:s.textColor,className:f("label"),name:s.name},u("label")),R=s.showValue&&l.createElement("text",L,s.valueTemplate.replace("{value}",s.value.toString())),W=o({ref:m,id:s.id,className:f("root"),style:s.style},u("root")),Y=o({viewBox:"0 0 100 100",width:s.size,height:s.size,onClick:function(e){return t=e,void(s.disabled||s.readOnly||_(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,M(),x(),void t.preventDefault();var t},onMouseUp:function(e){return k(),void E()},onTouchStart:function(e){return O(),void I()},onTouchEnd:function(e){return P(),void A()}},u("svg")),K=o({d:D,strokeWidth:s.strokeWidth,stroke:s.rangeColor,className:f("range")},u("range")),U=o({d:T,strokeWidth:s.strokeWidth,stroke:s.valueColor,className:f("value")},u("value"));return l.createElement("div",W,l.createElement("svg",Y,l.createElement("path",K),l.createElement("path",U),R))})));return b.displayName="Knob",e.Knob=b,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.knob=function(e,t,n,a,r,o){"use strict";function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=l(t);function s(e){if(Array.isArray(e))return e}function u(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,l,i=[],s=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(a=o.call(n)).done)&&(i.push(a.value),i.length!==t);s=!0);}catch(e){u=!0,r=e}finally{try{if(!s&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw r}}return i}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function f(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 m(){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 d(e,t){return s(e)||u(e,t)||f(e,t)||m()}var v=a.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,tabIndex:0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){var t=e.props;return o.classNames("p-knob p-component",{"p-disabled":t.disabled},t.className)}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),p=40,h=4*Math.PI/3,b=-Math.PI/3,y=i.memo(i.forwardRef((function(e,t){var o=r.useMergeProps(),l=i.useContext(n.PrimeReactContext),s=v.getProps(e,l),u=v.setMetaData({props:s}),c=u.ptm,f=u.cx;a.useHandleStyle(v.css.styles,u.isUnstyled,{name:"knob"});var m=i.useRef(null),y=!s.disabled&&!s.readOnly,g=d(r.useEventListener({target:"window",type:"mousemove",listener:function(e){T(e.offsetX,e.offsetY),e.preventDefault()},when:y}),2),w=g[0],k=g[1],x=d(r.useEventListener({target:"window",type:"mouseup",listener:function(e){k(),C(),e.preventDefault()},when:y}),2),M=x[0],C=x[1],E=d(r.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=m.current.getBoundingClientRect(),n=e.targetTouches.item(0);T(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:y}),2),D=E[0],P=E[1],O=d(r.useEventListener({target:"window",type:"touchend",listener:function(){P(),I()},when:y}),2),A=O[0],I=O[1],j=function(e,t,n,a,r){return(e-t)*(r-a)/(n-t)+a},L=function(){return j(s.min>0&&s.max>0?s.min:0,s.min,s.max,h,b)},N=function(){return j(s.value,s.min,s.max,h,b)},S="M ".concat(50+Math.cos(h)*p," ").concat(50-Math.sin(h)*p," A ").concat(p," ").concat(p," 0 1 1 ").concat(50+Math.cos(b)*p," ").concat(50-Math.sin(b)*p),z="M ".concat(50+Math.cos(L())*p," ").concat(50-Math.sin(L())*p," A ").concat(p," ").concat(p," 0 ").concat(Math.abs(L()-N())<Math.PI?0:1," ").concat(N()>L()?0:1," ").concat(50+Math.cos(N())*p," ").concat(50-Math.sin(N())*p),T=function(e,t){var n=Math.atan2(s.size/2-t,e-s.size/2),a=-Math.PI/2-Math.PI/6;R(n,a)},R=function(e,t){var n;if(e>b)n=j(e,h,b,s.min,s.max);else{if(!(e<t))return;n=j(e+2*Math.PI,h,b,s.min,s.max)}s.onChange&&s.onChange({value:Math.round((n-s.min)/s.step)*s.step+s.min})},_=function(e){var t;t=e>s.max?s.max:e<s.min?s.min:e,s.onChange&&s.onChange({value:t})},B=function(e){if(!s.disabled&&!s.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),_(s.value+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),_(s.value-1);break;case"Home":e.preventDefault(),_(s.min);break;case"End":e.preventDefault(),_(s.max);break;case"PageUp":e.preventDefault(),_(s.value+10);break;case"PageDown":e.preventDefault(),_(s.value-10)}};i.useImperativeHandle(t,(function(){return{props:s,getElement:function(){return m.current}}}));var U=o({x:50,y:57,textAnchor:"middle",fill:s.textColor,className:f("label"),name:s.name},c("label")),W=s.showValue&&i.createElement("text",U,s.valueTemplate.replace("{value}",s.value.toString())),K=o({ref:m,id:s.id,className:f("root"),style:s.style},c("root")),Y=o({viewBox:"0 0 100 100",width:s.size,height:s.size,"aria-valuemin":s.min,"aria-valuemax":s.max,"aria-valuenow":s.value,"aria-labelledby":s.ariaLabelledby,"aria-label":s.ariaLabel,role:"slider",tabIndex:s.readonly||s.disabled?-1:s.tabIndex,onClick:function(e){return t=e,void(s.disabled||s.readOnly||T(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,w(),M(),void t.preventDefault();var t},onMouseUp:function(e){return k(),void C()},onTouchStart:function(e){return D(),void A()},onTouchEnd:function(e){return P(),void I()},onKeyDown:function(e){return B(e)}},c("svg")),H=o({d:S,strokeWidth:s.strokeWidth,stroke:s.rangeColor,className:f("range")},c("range")),X=o({d:z,strokeWidth:s.strokeWidth,stroke:s.valueColor,className:f("value")},c("value"));return i.createElement("div",K,i.createElement("svg",Y,i.createElement("path",H),i.createElement("path",X),W))})));return y.displayName="Knob",e.Knob=y,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);