primereact 9.5.0 → 9.6.0

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';
 

package/knob/knob.esm.min.js

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

package/knob/knob.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.knob = (function (exports, React, hooks, utils) {
+this.primereact.knob = (function (exports, React, hooks, utils, componentbase, api) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -22,21 +22,6 @@ this.primereact.knob = (function (exports, React, hooks, utils) {
 
   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;
   }
@@ -92,7 +77,7 @@ this.primereact.knob = (function (exports, React, hooks, utils) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var KnobBase = {
+  var KnobBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Knob',
       id: null,
@@ -114,14 +99,8 @@ this.primereact.knob = (function (exports, React, hooks, utils) {
       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;
@@ -129,7 +108,12 @@ this.primereact.knob = (function (exports, React, hooks, utils) {
   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({
@@ -247,25 +231,25 @@ this.primereact.knob = (function (exports, React, hooks, utils) {
         });
       }
     };
-    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();
     };
@@ -277,43 +261,58 @@ this.primereact.knob = (function (exports, React, hooks, utils) {
         }
       };
     });
-    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';
 
@@ -323,4 +322,4 @@ this.primereact.knob = (function (exports, React, hooks, utils) {
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.utils);
+})({}, React, primereact.hooks, primereact.utils, primereact.componentbase, primereact.api);