primereact 9.4.0 → 9.6.0

package/keyfilter/keyfilter.cjs.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var utils = require('primereact/utils');
+
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -49,21 +51,22 @@ var KeyFilter = {
   /* eslint-enable */getRegex: function getRegex(keyfilter) {
     return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
   },
-  onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
-    if (validateOnly) {
+  onBeforeInput: function onBeforeInput(e, keyfilter, validateOnly) {
+    // android devices must use beforeinput https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229
+    if (validateOnly || !utils.DomHandler.isAndroid()) {
       return;
     }
-    if (e.ctrlKey || e.altKey) {
+    this.validateKey(e, e.data, keyfilter);
+  },
+  onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
+    // non android devices use keydown
+    if (validateOnly || utils.DomHandler.isAndroid()) {
       return;
     }
-    var isPrintableKey = e.key.length === 1;
-    if (!isPrintableKey) {
+    if (e.ctrlKey || e.altKey) {
       return;
     }
-    var regex = this.getRegex(keyfilter);
-    if (!regex.test(e.key)) {
-      e.preventDefault();
-    }
+    this.validateKey(e, e.key, keyfilter);
   },
   onPaste: function onPaste(e, keyfilter, validateOnly) {
     if (validateOnly) {
@@ -80,6 +83,19 @@ var KeyFilter = {
       }
     });
   },
+  validateKey: function validateKey(e, key, keyfilter) {
+    if (key === null || key === undefined) {
+      return;
+    }
+    var isPrintableKey = key.length === 1;
+    if (!isPrintableKey) {
+      return;
+    }
+    var regex = this.getRegex(keyfilter);
+    if (!regex.test(key)) {
+      e.preventDefault();
+    }
+  },
   validate: function validate(e, keyfilter) {
     var value = e.target.value,
       validatePattern = true;

package/keyfilter/keyfilter.cjs.min.js

@@ -1 +1 @@
-"use strict";function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function e(e){if(Array.isArray(e))return t(e)}function r(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function n(e,r){if(e){if("string"==typeof e)return t(e,r);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)?t(e,r):void 0}}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}Object.defineProperty(exports,"__esModule",{value:!0});var o={DEFAULT_MASKS:{pint:/[\d]/,int:/[\d\-]/,pnum:/[\d\.]/,money:/[\d\.\s,]/,num:/[\d\-\.]/,hex:/[0-9a-f]/i,email:/[a-z0-9_\.\-@]/i,alpha:/[a-z_]/i,alphanum:/[a-z0-9_]/i},getRegex:function(t){return o.DEFAULT_MASKS[t]?o.DEFAULT_MASKS[t]:t},onKeyPress:function(t,e,r){r||(t.ctrlKey||t.altKey||1===t.key.length&&(this.getRegex(e).test(t.key)||t.preventDefault()))},onPaste:function(t,o,i){if(!i){var u,l=this.getRegex(o),f=t.clipboardData.getData("text");(u=f,e(u)||r(u)||n(u)||a()).forEach((function(e){if(!l.test(e))return t.preventDefault(),!1}))}},validate:function(t,e){var r=t.target.value,n=!0,a=this.getRegex(e);return r&&!a.test(r)&&(n=!1),n}};exports.KeyFilter=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("primereact/utils");function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function r(t){if(Array.isArray(t))return e(t)}function n(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function a(t,r){if(t){if("string"==typeof t)return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,r):void 0}}function i(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o={DEFAULT_MASKS:{pint:/[\d]/,int:/[\d\-]/,pnum:/[\d\.]/,money:/[\d\.\s,]/,num:/[\d\-\.]/,hex:/[0-9a-f]/i,email:/[a-z0-9_\.\-@]/i,alpha:/[a-z_]/i,alphanum:/[a-z0-9_]/i},getRegex:function(t){return o.DEFAULT_MASKS[t]?o.DEFAULT_MASKS[t]:t},onBeforeInput:function(e,r,n){!n&&t.DomHandler.isAndroid()&&this.validateKey(e,e.data,r)},onKeyPress:function(e,r,n){n||t.DomHandler.isAndroid()||e.ctrlKey||e.altKey||this.validateKey(e,e.key,r)},onPaste:function(t,e,o){if(!o){var u,l=this.getRegex(e),s=t.clipboardData.getData("text");(u=s,r(u)||n(u)||a(u)||i()).forEach((function(e){if(!l.test(e))return t.preventDefault(),!1}))}},validateKey:function(t,e,r){null!=e&&(1===e.length&&(this.getRegex(r).test(e)||t.preventDefault()))},validate:function(t,e){var r=t.target.value,n=!0,a=this.getRegex(e);return r&&!a.test(r)&&(n=!1),n}};exports.KeyFilter=o;

package/keyfilter/keyfilter.esm.js

@@ -1,3 +1,5 @@
+import { DomHandler } from 'primereact/utils';
+
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -45,21 +47,22 @@ var KeyFilter = {
   /* eslint-enable */getRegex: function getRegex(keyfilter) {
     return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
   },
-  onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
-    if (validateOnly) {
+  onBeforeInput: function onBeforeInput(e, keyfilter, validateOnly) {
+    // android devices must use beforeinput https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229
+    if (validateOnly || !DomHandler.isAndroid()) {
       return;
     }
-    if (e.ctrlKey || e.altKey) {
+    this.validateKey(e, e.data, keyfilter);
+  },
+  onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
+    // non android devices use keydown
+    if (validateOnly || DomHandler.isAndroid()) {
       return;
     }
-    var isPrintableKey = e.key.length === 1;
-    if (!isPrintableKey) {
+    if (e.ctrlKey || e.altKey) {
       return;
     }
-    var regex = this.getRegex(keyfilter);
-    if (!regex.test(e.key)) {
-      e.preventDefault();
-    }
+    this.validateKey(e, e.key, keyfilter);
   },
   onPaste: function onPaste(e, keyfilter, validateOnly) {
     if (validateOnly) {
@@ -76,6 +79,19 @@ var KeyFilter = {
       }
     });
   },
+  validateKey: function validateKey(e, key, keyfilter) {
+    if (key === null || key === undefined) {
+      return;
+    }
+    var isPrintableKey = key.length === 1;
+    if (!isPrintableKey) {
+      return;
+    }
+    var regex = this.getRegex(keyfilter);
+    if (!regex.test(key)) {
+      e.preventDefault();
+    }
+  },
   validate: function validate(e, keyfilter) {
     var value = e.target.value,
       validatePattern = true;

package/keyfilter/keyfilter.esm.min.js

@@ -1 +1 @@
-function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function e(e){if(Array.isArray(e))return t(e)}function r(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function n(e,r){if(e){if("string"==typeof e)return t(e,r);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)?t(e,r):void 0}}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o={DEFAULT_MASKS:{pint:/[\d]/,int:/[\d\-]/,pnum:/[\d\.]/,money:/[\d\.\s,]/,num:/[\d\-\.]/,hex:/[0-9a-f]/i,email:/[a-z0-9_\.\-@]/i,alpha:/[a-z_]/i,alphanum:/[a-z0-9_]/i},getRegex:function(t){return o.DEFAULT_MASKS[t]?o.DEFAULT_MASKS[t]:t},onKeyPress:function(t,e,r){r||(t.ctrlKey||t.altKey||1===t.key.length&&(this.getRegex(e).test(t.key)||t.preventDefault()))},onPaste:function(t,o,i){if(!i){var u,l=this.getRegex(o),f=t.clipboardData.getData("text");(u=f,e(u)||r(u)||n(u)||a()).forEach((function(e){if(!l.test(e))return t.preventDefault(),!1}))}},validate:function(t,e){var r=t.target.value,n=!0,a=this.getRegex(e);return r&&!a.test(r)&&(n=!1),n}};export{o as KeyFilter};
+import{DomHandler as t}from"primereact/utils";function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function r(t){if(Array.isArray(t))return e(t)}function n(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function a(t,r){if(t){if("string"==typeof t)return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,r):void 0}}function i(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o={DEFAULT_MASKS:{pint:/[\d]/,int:/[\d\-]/,pnum:/[\d\.]/,money:/[\d\.\s,]/,num:/[\d\-\.]/,hex:/[0-9a-f]/i,email:/[a-z0-9_\.\-@]/i,alpha:/[a-z_]/i,alphanum:/[a-z0-9_]/i},getRegex:function(t){return o.DEFAULT_MASKS[t]?o.DEFAULT_MASKS[t]:t},onBeforeInput:function(e,r,n){!n&&t.isAndroid()&&this.validateKey(e,e.data,r)},onKeyPress:function(e,r,n){n||t.isAndroid()||e.ctrlKey||e.altKey||this.validateKey(e,e.key,r)},onPaste:function(t,e,o){if(!o){var u,l=this.getRegex(e),f=t.clipboardData.getData("text");(u=f,r(u)||n(u)||a(u)||i()).forEach((function(e){if(!l.test(e))return t.preventDefault(),!1}))}},validateKey:function(t,e,r){null!=e&&(1===e.length&&(this.getRegex(r).test(e)||t.preventDefault()))},validate:function(t,e){var r=t.target.value,n=!0,a=this.getRegex(e);return r&&!a.test(r)&&(n=!1),n}};export{o as KeyFilter};

package/keyfilter/keyfilter.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.keyfilter = (function (exports) {
+this.primereact.keyfilter = (function (exports, utils) {
   'use strict';
 
   function _arrayLikeToArray(arr, len) {
@@ -49,21 +49,22 @@ this.primereact.keyfilter = (function (exports) {
     /* eslint-enable */getRegex: function getRegex(keyfilter) {
       return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
     },
-    onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
-      if (validateOnly) {
+    onBeforeInput: function onBeforeInput(e, keyfilter, validateOnly) {
+      // android devices must use beforeinput https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229
+      if (validateOnly || !utils.DomHandler.isAndroid()) {
         return;
       }
-      if (e.ctrlKey || e.altKey) {
+      this.validateKey(e, e.data, keyfilter);
+    },
+    onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
+      // non android devices use keydown
+      if (validateOnly || utils.DomHandler.isAndroid()) {
         return;
       }
-      var isPrintableKey = e.key.length === 1;
-      if (!isPrintableKey) {
+      if (e.ctrlKey || e.altKey) {
         return;
       }
-      var regex = this.getRegex(keyfilter);
-      if (!regex.test(e.key)) {
-        e.preventDefault();
-      }
+      this.validateKey(e, e.key, keyfilter);
     },
     onPaste: function onPaste(e, keyfilter, validateOnly) {
       if (validateOnly) {
@@ -80,6 +81,19 @@ this.primereact.keyfilter = (function (exports) {
         }
       });
     },
+    validateKey: function validateKey(e, key, keyfilter) {
+      if (key === null || key === undefined) {
+        return;
+      }
+      var isPrintableKey = key.length === 1;
+      if (!isPrintableKey) {
+        return;
+      }
+      var regex = this.getRegex(keyfilter);
+      if (!regex.test(key)) {
+        e.preventDefault();
+      }
+    },
     validate: function validate(e, keyfilter) {
       var value = e.target.value,
         validatePattern = true;
@@ -97,4 +111,4 @@ this.primereact.keyfilter = (function (exports) {
 
   return exports;
 
-})({});
+})({}, primereact.utils);

package/keyfilter/keyfilter.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.keyfilter=function(t){"use strict";function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function r(t){if(Array.isArray(t))return e(t)}function n(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function a(t,r){if(t){if("string"==typeof t)return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,r):void 0}}function i(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o={DEFAULT_MASKS:{pint:/[\d]/,int:/[\d\-]/,pnum:/[\d\.]/,money:/[\d\.\s,]/,num:/[\d\-\.]/,hex:/[0-9a-f]/i,email:/[a-z0-9_\.\-@]/i,alpha:/[a-z_]/i,alphanum:/[a-z0-9_]/i},getRegex:function(t){return o.DEFAULT_MASKS[t]?o.DEFAULT_MASKS[t]:t},onKeyPress:function(t,e,r){r||(t.ctrlKey||t.altKey||1===t.key.length&&(this.getRegex(e).test(t.key)||t.preventDefault()))},onPaste:function(t,e,o){if(!o){var u,l=this.getRegex(e),c=t.clipboardData.getData("text");(u=c,r(u)||n(u)||a(u)||i()).forEach((function(e){if(!l.test(e))return t.preventDefault(),!1}))}},validate:function(t,e){var r=t.target.value,n=!0,a=this.getRegex(e);return r&&!a.test(r)&&(n=!1),n}};return t.KeyFilter=o,Object.defineProperty(t,"__esModule",{value:!0}),t}({});
+this.primereact=this.primereact||{},this.primereact.keyfilter=function(t,e){"use strict";function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function n(t){if(Array.isArray(t))return r(t)}function a(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function i(t,e){if(t){if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,e):void 0}}function o(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var u={DEFAULT_MASKS:{pint:/[\d]/,int:/[\d\-]/,pnum:/[\d\.]/,money:/[\d\.\s,]/,num:/[\d\-\.]/,hex:/[0-9a-f]/i,email:/[a-z0-9_\.\-@]/i,alpha:/[a-z_]/i,alphanum:/[a-z0-9_]/i},getRegex:function(t){return u.DEFAULT_MASKS[t]?u.DEFAULT_MASKS[t]:t},onBeforeInput:function(t,r,n){!n&&e.DomHandler.isAndroid()&&this.validateKey(t,t.data,r)},onKeyPress:function(t,r,n){n||e.DomHandler.isAndroid()||t.ctrlKey||t.altKey||this.validateKey(t,t.key,r)},onPaste:function(t,e,r){if(!r){var u,l=this.getRegex(e),c=t.clipboardData.getData("text");(u=c,n(u)||a(u)||i(u)||o()).forEach((function(e){if(!l.test(e))return t.preventDefault(),!1}))}},validateKey:function(t,e,r){null!=e&&(1===e.length&&(this.getRegex(r).test(e)||t.preventDefault()))},validate:function(t,e){var r=t.target.value,n=!0,a=this.getRegex(e);return r&&!a.test(r)&&(n=!1),n}};return t.KeyFilter=u,Object.defineProperty(t,"__esModule",{value:!0}),t}({},primereact.utils);

package/knob/knob.cjs.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var hooks = require('primereact/hooks');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
+var api = require('primereact/api');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -26,21 +28,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -96,7 +83,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var KnobBase = {
+var KnobBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Knob',
     id: null,
@@ -118,14 +105,8 @@ var KnobBase = {
     valueTemplate: '{value}',
     onChange: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, KnobBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, KnobBase.defaultProps);
   }
-};
+});
 
 var radius = 40;
 var midX = 50;
@@ -133,7 +114,12 @@ var midY = 50;
 var minRadians = 4 * Math.PI / 3;
 var maxRadians = -Math.PI / 3;
 var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-  var props = KnobBase.getProps(inProps);
+  var context = React__namespace.useContext(api.PrimeReactContext);
+  var props = KnobBase.getProps(inProps, context);
+  var _KnobBase$setMetaData = KnobBase.setMetaData({
+      props: props
+    }),
+    ptm = _KnobBase$setMetaData.ptm;
   var elementRef = React__namespace.useRef(null);
   var enabled = !props.disabled && !props.readOnly;
   var _useEventListener = hooks.useEventListener({
@@ -251,25 +237,25 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       });
     }
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event) {
     if (!props.disabled && !props.readOnly) {
       updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
     }
   };
-  var onMouseDown = function onMouseDown(event) {
+  var _onMouseDown = function onMouseDown(event) {
     bindWindowMouseMoveListener();
     bindWindowMouseUpListener();
     event.preventDefault();
   };
-  var onMouseUp = function onMouseUp() {
+  var _onMouseUp = function onMouseUp() {
     unbindWindowMouseMoveListener();
     unbindWindowMouseUpListener();
   };
-  var onTouchStart = function onTouchStart() {
+  var _onTouchStart = function onTouchStart() {
     bindWindowTouchMoveListener();
     bindWindowTouchEndListener();
   };
-  var onTouchEnd = function onTouchEnd() {
+  var _onTouchEnd = function onTouchEnd() {
     unbindWindowTouchMoveListener();
     unbindWindowTouchEndListener();
   };
@@ -281,43 +267,58 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       }
     };
   });
-  var otherProps = KnobBase.getOtherProps(props);
+  KnobBase.getOtherProps(props);
   var className = utils.classNames('p-knob p-component', {
     'p-disabled': props.disabled
   }, props.className);
-  var text = props.showValue && /*#__PURE__*/React__namespace.createElement("text", {
+  var labelProps = utils.mergeProps({
     x: 50,
     y: 57,
     textAnchor: 'middle',
     fill: props.textColor,
     className: 'p-knob-text',
     name: props.name
-  }, valueToDisplay());
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  }, ptm('label'));
+  var text = props.showValue && /*#__PURE__*/React__namespace.createElement("text", labelProps, valueToDisplay());
+  var rootProps = utils.mergeProps({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), /*#__PURE__*/React__namespace.createElement("svg", {
-    viewBox: "0 0 100 100",
+  }, ptm('root'));
+  var svgProps = utils.mergeProps({
+    viewBox: '0 0 100 100',
     width: props.size,
     height: props.size,
-    onClick: onClick,
-    onMouseDown: onMouseDown,
-    onMouseUp: onMouseUp,
-    onTouchStart: onTouchStart,
-    onTouchEnd: onTouchEnd
-  }, /*#__PURE__*/React__namespace.createElement("path", {
+    onClick: function onClick(e) {
+      return _onClick(e);
+    },
+    onMouseDown: function onMouseDown(e) {
+      return _onMouseDown(e);
+    },
+    onMouseUp: function onMouseUp(e) {
+      return _onMouseUp();
+    },
+    onTouchStart: function onTouchStart(e) {
+      return _onTouchStart();
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      return _onTouchEnd();
+    }
+  }, ptm('svg'));
+  var rangeProps = utils.mergeProps({
     d: rangePath,
     strokeWidth: props.strokeWidth,
     stroke: props.rangeColor,
     className: 'p-knob-range'
-  }), /*#__PURE__*/React__namespace.createElement("path", {
+  }, ptm('range'));
+  var valueProps = utils.mergeProps({
     d: valuePath,
     strokeWidth: props.strokeWidth,
     stroke: props.valueColor,
     className: 'p-knob-value'
-  }), text));
+  }, ptm('value'));
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("svg", svgProps, /*#__PURE__*/React__namespace.createElement("path", rangeProps), /*#__PURE__*/React__namespace.createElement("path", valueProps), text));
 }));
 Knob.displayName = 'Knob';
 

package/knob/knob.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),n=require("primereact/utils");function r(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 a=r(e);function o(){return o=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},o.apply(this,arguments)}function i(e){if(Array.isArray(e))return e}function l(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],c=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw a}}return l}}function c(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 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 s(){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)||l(e,t)||u(e,t)||s()}var d={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},getProps:function(e){return n.ObjectUtils.getMergedProps(e,d.defaultProps)},getOtherProps:function(e){return n.ObjectUtils.getDiffProps(e,d.defaultProps)}},h=40,p=4*Math.PI/3,m=-Math.PI/3,v=a.memo(a.forwardRef((function(e,r){var i=d.getProps(e),l=a.useRef(null),c=!i.disabled&&!i.readOnly,u=f(t.useEventListener({target:"window",type:"mousemove",listener:function(e){N(e.offsetX,e.offsetY),e.preventDefault()},when:c}),2),s=u[0],v=u[1],y=f(t.useEventListener({target:"window",type:"mouseup",listener:function(e){v(),g(),e.preventDefault()},when:c}),2),b=y[0],g=y[1],M=f(t.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=l.current.getBoundingClientRect(),n=e.targetTouches.item(0);N(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:c}),2),w=M[0],O=M[1],P=f(t.useEventListener({target:"window",type:"touchend",listener:function(){O(),j()},when:c}),2),x=P[0],j=P[1],k=function(e,t,n,r,a){return(e-t)*(a-r)/(n-t)+r},E=function(){return k(i.min>0&&i.max>0?i.min:0,i.min,i.max,p,m)},C=function(){return k(i.value,i.min,i.max,p,m)},I="M ".concat(50+Math.cos(p)*h," ").concat(50-Math.sin(p)*h," A ").concat(h," ").concat(h," 0 1 1 ").concat(50+Math.cos(m)*h," ").concat(50-Math.sin(m)*h),A="M ".concat(50+Math.cos(E())*h," ").concat(50-Math.sin(E())*h," A ").concat(h," ").concat(h," 0 ").concat(Math.abs(E()-C())<Math.PI?0:1," ").concat(C()>E()?0:1," ").concat(50+Math.cos(C())*h," ").concat(50-Math.sin(C())*h),N=function(e,t){var n=Math.atan2(i.size/2-t,e-i.size/2),r=-Math.PI/2-Math.PI/6;D(n,r)},D=function(e,t){var n;if(e>m)n=k(e,p,m,i.min,i.max);else{if(!(e<t))return;n=k(e+2*Math.PI,p,m,i.min,i.max)}i.onChange&&i.onChange({value:Math.round((n-i.min)/i.step)*i.step+i.min})};a.useImperativeHandle(r,(function(){return{props:i,getElement:function(){return l.current}}}));var S=d.getOtherProps(i),T=n.classNames("p-knob p-component",{"p-disabled":i.disabled},i.className),z=i.showValue&&a.createElement("text",{x:50,y:57,textAnchor:"middle",fill:i.textColor,className:"p-knob-text",name:i.name},i.valueTemplate.replace("{value}",i.value.toString()));return a.createElement("div",o({ref:l,id:i.id,className:T,style:i.style},S),a.createElement("svg",{viewBox:"0 0 100 100",width:i.size,height:i.size,onClick:function(e){i.disabled||i.readOnly||N(e.nativeEvent.offsetX,e.nativeEvent.offsetY)},onMouseDown:function(e){s(),b(),e.preventDefault()},onMouseUp:function(){v(),g()},onTouchStart:function(){w(),x()},onTouchEnd:function(){O(),j()}},a.createElement("path",{d:I,strokeWidth:i.strokeWidth,stroke:i.rangeColor,className:"p-knob-range"}),a.createElement("path",{d:A,strokeWidth:i.strokeWidth,stroke:i.valueColor,className:"p-knob-value"}),z))})));v.displayName="Knob",exports.Knob=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),n=require("primereact/utils"),r=require("primereact/componentbase"),a=require("primereact/api");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 u(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],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)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,a=e}finally{try{if(!u&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw a}}return l}}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 s(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 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)||u(e,t)||s(e,t)||f()}var d=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}}),p=40,v=4*Math.PI/3,h=-Math.PI/3,g=i.memo(i.forwardRef((function(e,r){var o=i.useContext(a.PrimeReactContext),l=d.getProps(e,o),u=d.setMetaData({props:l}).ptm,c=i.useRef(null),s=!l.disabled&&!l.readOnly,f=m(t.useEventListener({target:"window",type:"mousemove",listener:function(e){S(e.offsetX,e.offsetY),e.preventDefault()},when:s}),2),g=f[0],y=f[1],b=m(t.useEventListener({target:"window",type:"mouseup",listener:function(e){y(),w(),e.preventDefault()},when:s}),2),M=b[0],w=b[1],x=m(t.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=c.current.getBoundingClientRect(),n=e.targetTouches.item(0);S(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:s}),2),P=x[0],k=x[1],E=m(t.useEventListener({target:"window",type:"touchend",listener:function(){k(),O()},when:s}),2),C=E[0],O=E[1],j=function(e,t,n,r,a){return(e-t)*(a-r)/(n-t)+r},I=function(){return j(l.min>0&&l.max>0?l.min:0,l.min,l.max,v,h)},A=function(){return j(l.value,l.min,l.max,v,h)},N="M ".concat(50+Math.cos(v)*p," ").concat(50-Math.sin(v)*p," A ").concat(p," ").concat(p," 0 1 1 ").concat(50+Math.cos(h)*p," ").concat(50-Math.sin(h)*p),D="M ".concat(50+Math.cos(I())*p," ").concat(50-Math.sin(I())*p," A ").concat(p," ").concat(p," 0 ").concat(Math.abs(I()-A())<Math.PI?0:1," ").concat(A()>I()?0:1," ").concat(50+Math.cos(A())*p," ").concat(50-Math.sin(A())*p),S=function(e,t){var n=Math.atan2(l.size/2-t,e-l.size/2),r=-Math.PI/2-Math.PI/6;T(n,r)},T=function(e,t){var n;if(e>h)n=j(e,v,h,l.min,l.max);else{if(!(e<t))return;n=j(e+2*Math.PI,v,h,l.min,l.max)}l.onChange&&l.onChange({value:Math.round((n-l.min)/l.step)*l.step+l.min})};i.useImperativeHandle(r,(function(){return{props:l,getElement:function(){return c.current}}})),d.getOtherProps(l);var z=n.classNames("p-knob p-component",{"p-disabled":l.disabled},l.className),_=n.mergeProps({x:50,y:57,textAnchor:"middle",fill:l.textColor,className:"p-knob-text",name:l.name},u("label")),q=l.showValue&&i.createElement("text",_,l.valueTemplate.replace("{value}",l.value.toString())),B=n.mergeProps({ref:c,id:l.id,className:z,style:l.style},u("root")),L=n.mergeProps({viewBox:"0 0 100 100",width:l.size,height:l.size,onClick:function(e){return t=e,void(l.disabled||l.readOnly||S(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,g(),M(),void t.preventDefault();var t},onMouseUp:function(e){return y(),void w()},onTouchStart:function(e){return P(),void C()},onTouchEnd:function(e){return k(),void O()}},u("svg")),W=n.mergeProps({d:N,strokeWidth:l.strokeWidth,stroke:l.rangeColor,className:"p-knob-range"},u("range")),R=n.mergeProps({d:D,strokeWidth:l.strokeWidth,stroke:l.valueColor,className:"p-knob-value"},u("value"));return i.createElement("div",B,i.createElement("svg",L,i.createElement("path",W),i.createElement("path",R),q))})));g.displayName="Knob",exports.Knob=g;

package/knob/knob.d.ts

@@ -8,6 +8,43 @@
  *
  */
 import * as React from 'react';
+import { PassThroughType } from '../utils/utils';
+
+export declare type KnobPassThroughType<T> = PassThroughType<T, KnobPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface KnobPassThroughMethodOptions {
+    props: KnobProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link KnobProps.pt}
+ */
+export interface KnobPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: KnobPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the svg's DOM element.
+     */
+    svg?: KnobPassThroughType<React.SVGProps<SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: KnobPassThroughType<React.SVGProps<SVGPathElement>>;
+    /**
+     * Uses to pass attributes to the value' DOM element.
+     */
+    value?: KnobPassThroughType<React.SVGProps<SVGPathElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: KnobPassThroughType<React.SVGProps<SVGTextElement>>;
+}
 
 /**
  * Custom change event.
@@ -116,6 +153,11 @@ export interface KnobProps extends Omit<React.DetailedHTMLProps<React.InputHTMLA
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {KnobPassThroughOptions}
+     */
+    pt?: KnobPassThroughOptions;
 }
 
 /**

package/knob/knob.esm.js

@@ -1,21 +1,8 @@
 import * as React from 'react';
 import { useEventListener } from 'primereact/hooks';
-import { ObjectUtils, classNames } from 'primereact/utils';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+import { classNames, mergeProps } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
+import { PrimeReactContext } from 'primereact/api';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -72,7 +59,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var KnobBase = {
+var KnobBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Knob',
     id: null,
@@ -94,14 +81,8 @@ var KnobBase = {
     valueTemplate: '{value}',
     onChange: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, KnobBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, KnobBase.defaultProps);
   }
-};
+});
 
 var radius = 40;
 var midX = 50;
@@ -109,7 +90,12 @@ var midY = 50;
 var minRadians = 4 * Math.PI / 3;
 var maxRadians = -Math.PI / 3;
 var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = KnobBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = KnobBase.getProps(inProps, context);
+  var _KnobBase$setMetaData = KnobBase.setMetaData({
+      props: props
+    }),
+    ptm = _KnobBase$setMetaData.ptm;
   var elementRef = React.useRef(null);
   var enabled = !props.disabled && !props.readOnly;
   var _useEventListener = useEventListener({
@@ -227,25 +213,25 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       });
     }
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event) {
     if (!props.disabled && !props.readOnly) {
       updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
     }
   };
-  var onMouseDown = function onMouseDown(event) {
+  var _onMouseDown = function onMouseDown(event) {
     bindWindowMouseMoveListener();
     bindWindowMouseUpListener();
     event.preventDefault();
   };
-  var onMouseUp = function onMouseUp() {
+  var _onMouseUp = function onMouseUp() {
     unbindWindowMouseMoveListener();
     unbindWindowMouseUpListener();
   };
-  var onTouchStart = function onTouchStart() {
+  var _onTouchStart = function onTouchStart() {
     bindWindowTouchMoveListener();
     bindWindowTouchEndListener();
   };
-  var onTouchEnd = function onTouchEnd() {
+  var _onTouchEnd = function onTouchEnd() {
     unbindWindowTouchMoveListener();
     unbindWindowTouchEndListener();
   };
@@ -257,43 +243,58 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       }
     };
   });
-  var otherProps = KnobBase.getOtherProps(props);
+  KnobBase.getOtherProps(props);
   var className = classNames('p-knob p-component', {
     'p-disabled': props.disabled
   }, props.className);
-  var text = props.showValue && /*#__PURE__*/React.createElement("text", {
+  var labelProps = mergeProps({
     x: 50,
     y: 57,
     textAnchor: 'middle',
     fill: props.textColor,
     className: 'p-knob-text',
     name: props.name
-  }, valueToDisplay());
-  return /*#__PURE__*/React.createElement("div", _extends({
+  }, ptm('label'));
+  var text = props.showValue && /*#__PURE__*/React.createElement("text", labelProps, valueToDisplay());
+  var rootProps = mergeProps({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 100 100",
+  }, ptm('root'));
+  var svgProps = mergeProps({
+    viewBox: '0 0 100 100',
     width: props.size,
     height: props.size,
-    onClick: onClick,
-    onMouseDown: onMouseDown,
-    onMouseUp: onMouseUp,
-    onTouchStart: onTouchStart,
-    onTouchEnd: onTouchEnd
-  }, /*#__PURE__*/React.createElement("path", {
+    onClick: function onClick(e) {
+      return _onClick(e);
+    },
+    onMouseDown: function onMouseDown(e) {
+      return _onMouseDown(e);
+    },
+    onMouseUp: function onMouseUp(e) {
+      return _onMouseUp();
+    },
+    onTouchStart: function onTouchStart(e) {
+      return _onTouchStart();
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      return _onTouchEnd();
+    }
+  }, ptm('svg'));
+  var rangeProps = mergeProps({
     d: rangePath,
     strokeWidth: props.strokeWidth,
     stroke: props.rangeColor,
     className: 'p-knob-range'
-  }), /*#__PURE__*/React.createElement("path", {
+  }, ptm('range'));
+  var valueProps = mergeProps({
     d: valuePath,
     strokeWidth: props.strokeWidth,
     stroke: props.valueColor,
     className: 'p-knob-value'
-  }), text));
+  }, ptm('value'));
+  return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("svg", svgProps, /*#__PURE__*/React.createElement("path", rangeProps), /*#__PURE__*/React.createElement("path", valueProps), text));
 }));
 Knob.displayName = 'Knob';