primereact 9.5.0 → 9.6.0

package/colorpicker/colorpicker.esm.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import PrimeReact from 'primereact/api';
+import PrimeReact, { PrimeReactContext } from 'primereact/api';
 import { useOverlayListener, useEventListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { OverlayService } from 'primereact/overlayservice';
 import { Tooltip } from 'primereact/tooltip';
-import { ObjectUtils, classNames, DomHandler, ZIndexUtils } from 'primereact/utils';
+import { classNames, mergeProps, DomHandler, ObjectUtils, ZIndexUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { CSSTransition } from 'primereact/csstransition';
 import { Portal } from 'primereact/portal';
 
@@ -22,6 +23,47 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -77,7 +119,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var ColorPickerBase = {
+var ColorPickerBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'ColorPicker',
     appendTo: null,
@@ -104,23 +146,24 @@ var ColorPickerBase = {
     tooltipOptions: null,
     transitionOptions: null,
     value: null
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, ColorPickerBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, ColorPickerBase.defaultProps);
   }
-};
+});
 
 var ColorPickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var context = React.useContext(PrimeReactContext);
   var createElement = function createElement() {
     var className = classNames('p-colorpicker-panel', props.panelClassName, {
       'p-colorpicker-overlay-panel': !props.inline,
       'p-disabled': props.disabled,
-      'p-input-filled': PrimeReact.inputStyle === 'filled',
-      'p-ripple-disabled': PrimeReact.ripple === false
+      'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
     });
+    var panelProps = mergeProps({
+      ref: ref,
+      className: className,
+      style: props.panelStyle,
+      onClick: props.onClick
+    }, props.ptm('panel'));
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: ref,
       classNames: "p-connected-overlay",
@@ -135,12 +178,7 @@ var ColorPickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onEntered: props.onEntered,
       onExit: props.onExit,
       onExited: props.onExited
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      className: className,
-      style: props.panelStyle,
-      onClick: props.onClick
-    }, props.children));
+    }, /*#__PURE__*/React.createElement("div", panelProps, props.children));
   };
   var element = createElement();
   return props.inline ? element : /*#__PURE__*/React.createElement(Portal, {
@@ -150,12 +188,22 @@ var ColorPickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 ColorPickerPanel.displayName = 'ColorPickerPanel';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = ColorPickerBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = ColorPickerBase.getProps(inProps, context);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     overlayVisibleState = _React$useState2[0],
     setOverlayVisibleState = _React$useState2[1];
+  var _ColorPickerBase$setM = ColorPickerBase.setMetaData({
+      props: props,
+      state: {
+        overlayVisible: overlayVisibleState
+      }
+    }),
+    ptm = _ColorPickerBase$setM.ptm;
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
@@ -371,7 +419,7 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     setOverlayVisibleState(false);
   };
   var onOverlayEnter = function onOverlayEnter() {
-    ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
+    ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex['overlay'] || PrimeReact.zIndex['overlay']);
     alignOverlay();
   };
   var onOverlayEntered = function onOverlayEntered() {
@@ -530,7 +578,7 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
   var alignOverlay = function alignOverlay() {
     if (inputRef.current) {
-      DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
+      DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
     }
   };
   React.useImperativeHandle(ref, function () {
@@ -574,39 +622,57 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     ZIndexUtils.clear(overlayRef.current);
   });
   var createColorSelector = function createColorSelector() {
-    return /*#__PURE__*/React.createElement("div", {
+    var selectorProps = mergeProps({
       ref: colorSelectorRef,
-      className: "p-colorpicker-color-selector",
-      onMouseDown: onColorMousedown,
-      onTouchStart: onColorDragStart,
-      onTouchMove: onDrag,
+      className: 'p-colorpicker-color-selector',
+      onMouseDown: function onMouseDown(e) {
+        return onColorMousedown(e);
+      },
+      onTouchStart: function onTouchStart(e) {
+        return onColorDragStart(e);
+      },
+      onTouchMove: function onTouchMove(e) {
+        return onDrag(e);
+      },
       onTouchEnd: onDragEnd
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "p-colorpicker-color"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, ptm('selector'));
+    var colorProps = mergeProps({
+      className: 'p-colorpicker-color'
+    }, ptm('color'));
+    var colorHandlerProps = mergeProps({
       ref: colorHandleRef,
-      className: "p-colorpicker-color-handle"
-    })));
+      className: 'p-colorpicker-color-handle'
+    }, ptm('colorHandler'));
+    return /*#__PURE__*/React.createElement("div", selectorProps, /*#__PURE__*/React.createElement("div", colorProps, /*#__PURE__*/React.createElement("div", colorHandlerProps)));
   };
   var createHue = function createHue() {
-    return /*#__PURE__*/React.createElement("div", {
+    var hueProps = mergeProps({
       ref: hueViewRef,
-      className: "p-colorpicker-hue",
-      onMouseDown: onHueMousedown,
-      onTouchStart: onHueDragStart,
-      onTouchMove: onDrag,
+      className: 'p-colorpicker-hue',
+      onMouseDown: function onMouseDown(e) {
+        return onHueMousedown(e);
+      },
+      onTouchStart: function onTouchStart(e) {
+        return onHueDragStart(e);
+      },
+      onTouchMove: function onTouchMove(e) {
+        return onDrag(e);
+      },
       onTouchEnd: onDragEnd
-    }, /*#__PURE__*/React.createElement("div", {
+    }, ptm('hue'));
+    var hueHandlerProps = mergeProps({
       ref: hueHandleRef,
-      className: "p-colorpicker-hue-handle"
-    }));
+      className: 'p-colorpicker-hue-handle'
+    }, ptm('hueHandler'));
+    return /*#__PURE__*/React.createElement("div", hueProps, /*#__PURE__*/React.createElement("div", hueHandlerProps));
   };
   var createContent = function createContent() {
     var colorSelector = createColorSelector();
     var hue = createHue();
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-colorpicker-content"
-    }, colorSelector, hue);
+    var contentProps = mergeProps({
+      className: 'p-colorpicker-content'
+    }, ptm('content'));
+    return /*#__PURE__*/React.createElement("div", contentProps, colorSelector, hue);
   };
   var createInput = function createInput() {
     if (!props.inline) {
@@ -614,9 +680,9 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         'p-disabled': props.disabled
       });
       var inputProps = ColorPickerBase.getOtherProps(props);
-      return /*#__PURE__*/React.createElement("input", _extends({
+      var _inputProps = mergeProps(_objectSpread({
         ref: inputRef,
-        type: "text",
+        type: 'text',
         readOnly: true,
         className: inputClassName,
         style: props.inputStyle,
@@ -625,23 +691,24 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         disabled: props.disabled,
         onClick: onInputClick,
         onKeyDown: onInputKeydown
-      }, inputProps));
+      }, inputProps), ptm('input'));
+      return /*#__PURE__*/React.createElement("input", _inputProps);
     }
     return null;
   };
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-  var otherProps = ColorPickerBase.getOtherProps(props);
   var className = classNames('p-colorpicker p-component', {
     'p-colorpicker-overlay': !props.inline
   }, props.className);
   var content = createContent();
   var input = createInput();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
-    ref: elementRef,
+  var rootProps = mergeProps({
     id: props.id,
+    ref: elementRef,
     style: props.style,
     className: className
-  }, otherProps), input, /*#__PURE__*/React.createElement(ColorPickerPanel, {
+  }, ColorPickerBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, input, /*#__PURE__*/React.createElement(ColorPickerPanel, {
     ref: overlayRef,
     appendTo: props.appendTo,
     inline: props.inline,
@@ -654,11 +721,14 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     onEntered: onOverlayEntered,
     onExit: onOverlayExit,
     onExited: onOverlayExited,
-    transitionOptions: props.transitionOptions
+    transitionOptions: props.transitionOptions,
+    ptm: ptm
   }, content)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
-  }, props.tooltipOptions)));
+  }, props.tooltipOptions, {
+    pt: ptm('tooltip')
+  })));
 }));
 ColorPicker.displayName = 'ColorPicker';
 

package/colorpicker/colorpicker.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import n from"primereact/api";import{useOverlayListener as t,useEventListener as r,useMountEffect as o,useUpdateEffect as l,useUnmountEffect as a}from"primereact/hooks";import{OverlayService as i}from"primereact/overlayservice";import{Tooltip as u}from"primereact/tooltip";import{ObjectUtils as c,classNames as s,DomHandler as p,ZIndexUtils as f}from"primereact/utils";import{CSSTransition as d}from"primereact/csstransition";import{Portal as m}from"primereact/portal";function h(){return h=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},h.apply(this,arguments)}function g(e){if(Array.isArray(e))return e}function b(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,l,a,i=[],u=!0,c=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=l.call(t)).done)&&(i.push(r.value),i.length!==n);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw o}}return i}}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function y(e,n){if(e){if("string"==typeof e)return v(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?v(e,n):void 0}}function E(){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,n){return g(e)||b(e,n)||y(e,n)||E()}var k={defaultProps:{__TYPE:"ColorPicker",appendTo:null,autoFocus:!1,children:void 0,className:null,defaultColor:"ff0000",disabled:!1,format:"hex",id:null,inline:!1,inputClassName:null,inputId:null,inputRef:null,inputStyle:null,onChange:null,onHide:null,onShow:null,panelClassName:null,panelStyle:null,style:null,tabIndex:null,tooltip:null,tooltipOptions:null,transitionOptions:null,value:null},getProps:function(e){return c.getMergedProps(e,k.defaultProps)},getOtherProps:function(e){return c.getDiffProps(e,k.defaultProps)}},x=e.forwardRef((function(t,r){var o,l=(o=s("p-colorpicker-panel",t.panelClassName,{"p-colorpicker-overlay-panel":!t.inline,"p-disabled":t.disabled,"p-input-filled":"filled"===n.inputStyle,"p-ripple-disabled":!1===n.ripple}),e.createElement(d,{nodeRef:r,classNames:"p-connected-overlay",in:t.in,timeout:{enter:120,exit:100},options:t.transitionOptions,unmountOnExit:!0,onEnter:t.onEnter,onEntered:t.onEntered,onExit:t.onExit,onExited:t.onExited},e.createElement("div",{ref:r,className:o,style:t.panelStyle,onClick:t.onClick},t.children)));return t.inline?l:e.createElement(m,{element:l,appendTo:t.appendTo})}));x.displayName="ColorPickerPanel";var C=e.memo(e.forwardRef((function(d,m){var g=k.getProps(d),b=M(e.useState(!1),2),v=b[0],y=b[1],E=e.useRef(null),C=e.useRef(null),w=e.useRef(g.inputRef),O=e.useRef(null),T=e.useRef(null),N=e.useRef(null),S=e.useRef(null),R=e.useRef(!1),P=e.useRef(null),I=e.useRef(!1),j=M(t({target:E,overlay:C,listener:function(e,n){n.valid&&ie()},when:v}),2),D=j[0],Y=j[1],A=M(r({type:"mousemove",listener:function(e){I.current&&Q(e),R.current&&L(e)}}),2),F=A[0],H=A[1],B=M(r({type:"mouseup",listener:function(){I.current=R.current=!1,p.removeClass(E.current,"p-colorpicker-dragging"),H(),_()}}),2),X=B[0],_=B[1],z=function(e){g.disabled||(G(),K(e))},K=function(e){g.disabled||(R.current=!0,L(e),p.addClass(E.current,"p-colorpicker-dragging"))},L=function(e){var n=S.current.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);P.current=pe({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-n)))/150),s:100,b:100}),te(),oe(),V()},U=function(e){g.disabled||(G(),Z(e))},Z=function(e){g.disabled||(I.current=!0,Q(e),p.addClass(E.current,"p-colorpicker-dragging"),e.preventDefault())},$=function(e){I.current&&(Q(e),e.preventDefault()),R.current&&(L(e),e.preventDefault())},q=function(){I.current=!1,R.current=!1,p.removeClass(E.current,"p-colorpicker-dragging"),J()},G=function(){F(),X()},J=function(){H(),_()},Q=function(e){var n=O.current.getBoundingClientRect(),t=n.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),r=n.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-r))/150),l=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150);P.current=pe({h:P.current.h,s:o,b:l}),re(),le(),V()},V=function(){switch(g.format){case"hex":ne(be(P.current));break;case"rgb":ne(he(P.current));break;case"hsb":ne(P.current)}},W=function(e){var n;if(e)switch(g.format){case"hex":n=de(e);break;case"rgb":n=me(e);break;case"hsb":n=e}else n=de(g.defaultColor);return n},ee=function(e){P.current=W(e)},ne=function(e){g.onChange&&g.onChange({value:e,stopPropagation:function(){},preventDefault:function(){},target:{name:g.name,id:g.id,value:e}})},te=function(){if(O.current){var e=pe({h:P.current.h,s:100,b:100});O.current.style.backgroundColor="#"+be(e)}},re=function(){T.current&&(T.current.style.left=Math.floor(150*P.current.s/100)+"px",T.current.style.top=Math.floor(150*(100-P.current.b)/100)+"px")},oe=function(){N.current&&(N.current.style.top=Math.floor(150-150*P.current.h/360)+"px")},le=function(){w.current&&(w.current.style.backgroundColor="#"+be(P.current))},ae=function(){y(!0)},ie=function(){y(!1)},ue=function(){ce()},ce=function(){v?ie():ae()},se=function(e){switch(e.which){case 32:ce(),e.preventDefault();break;case 27:case 9:ie()}},pe=function(e){return{h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}},fe=function(e){var n=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:n>>16,g:(65280&n)>>8,b:255&n}},de=function(e){return me(fe(e))},me=function(e){var n={h:0,s:0,b:0},t=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b),o=r-t;return n.b=r,n.s=0!==r?255*o/r:0,n.h=0!==n.s?e.r===r?(e.g-e.b)/o:e.g===r?2+(e.b-e.r)/o:4+(e.r-e.g)/o:-1,n.h*=60,n.h<0&&(n.h+=360),n.s*=100/255,n.b*=100/255,n},he=function(e){var n={r:null,g:null,b:null},t=Math.round(e.h),r=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===r)n={r:o,g:o,b:o};else{var l=o,a=(255-r)*o/255,i=t%60*(l-a)/60;360===t&&(t=0),t<60?(n.r=l,n.b=a,n.g=a+i):t<120?(n.g=l,n.b=a,n.r=l-i):t<180?(n.g=l,n.r=a,n.b=a+i):t<240?(n.b=l,n.r=a,n.g=l-i):t<300?(n.b=l,n.g=a,n.r=a+i):t<360?(n.r=l,n.g=a,n.b=l-i):(n.r=0,n.g=0,n.b=0)}return{r:Math.round(n.r),g:Math.round(n.g),b:Math.round(n.b)}},ge=function(e){var n=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var t in n)1===n[t].length&&(n[t]="0"+n[t]);return n.join("")},be=function(e){return ge(he(e))},ve=function(){oe(),re(),le(),te()},ye=function(){w.current&&p.alignOverlay(C.current,w.current.parentElement,g.appendTo||n.appendTo)};e.useImperativeHandle(m,(function(){return{props:g,show:ae,hide:ie,focus:function(){return p.focus(w.current)},getElement:function(){return E.current},getOverlay:function(){return C.current},getInput:function(){return w.current}}})),e.useEffect((function(){c.combinedRefs(w,g.inputRef)}),[w,g.inputRef]),o((function(){ee(g.value),ve(),g.autoFocus&&p.focus(w.current,g.autoFocus)})),l((function(){I.current||R.current||ee(g.value)}),[g.value]),l((function(){ve()})),a((function(){f.clear(C.current)}));var Ee=c.isNotEmpty(g.tooltip),Me=k.getOtherProps(g),ke=s("p-colorpicker p-component",{"p-colorpicker-overlay":!g.inline},g.className),xe=e.createElement("div",{className:"p-colorpicker-content"},e.createElement("div",{ref:O,className:"p-colorpicker-color-selector",onMouseDown:U,onTouchStart:Z,onTouchMove:$,onTouchEnd:q},e.createElement("div",{className:"p-colorpicker-color"},e.createElement("div",{ref:T,className:"p-colorpicker-color-handle"}))),e.createElement("div",{ref:S,className:"p-colorpicker-hue",onMouseDown:z,onTouchStart:K,onTouchMove:$,onTouchEnd:q},e.createElement("div",{ref:N,className:"p-colorpicker-hue-handle"}))),Ce=function(){if(!g.inline){var n=s("p-colorpicker-preview p-inputtext",g.inputClassName,{"p-disabled":g.disabled}),t=k.getOtherProps(g);return e.createElement("input",h({ref:w,type:"text",readOnly:!0,className:n,style:g.inputStyle,id:g.inputId,tabIndex:g.tabIndex,disabled:g.disabled,onClick:ue,onKeyDown:se},t))}return null}();return e.createElement(e.Fragment,null,e.createElement("div",h({ref:E,id:g.id,style:g.style,className:ke},Me),Ce,e.createElement(x,{ref:C,appendTo:g.appendTo,inline:g.inline,disabled:g.disabled,panelStyle:g.panelStyle,panelClassName:g.panelClassName,onClick:function(e){g.inline||i.emit("overlay-click",{originalEvent:e,target:E.current})},in:g.inline||v,onEnter:function(){f.set("overlay",C.current,n.autoZIndex,n.zIndex.overlay),ye()},onEntered:function(){D(),g.onShow&&g.onShow()},onExit:function(){Y()},onExited:function(){f.clear(C.current),g.onHide&&g.onHide()},transitionOptions:g.transitionOptions},xe)),Ee&&e.createElement(u,h({target:E,content:g.tooltip},g.tooltipOptions)))})));C.displayName="ColorPicker";export{C as ColorPicker};
+import*as e from"react";import n,{PrimeReactContext as t}from"primereact/api";import{useOverlayListener as r,useEventListener as o,useMountEffect as i,useUpdateEffect as l,useUnmountEffect as u}from"primereact/hooks";import{OverlayService as a}from"primereact/overlayservice";import{Tooltip as c}from"primereact/tooltip";import{classNames as p,mergeProps as s,DomHandler as f,ObjectUtils as d,ZIndexUtils as m}from"primereact/utils";import{ComponentBase as b}from"primereact/componentbase";import{CSSTransition as h}from"primereact/csstransition";import{Portal as g}from"primereact/portal";function y(){return y=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},y.apply(this,arguments)}function v(e){return v="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},v(e)}function E(e,n){if("object"!==v(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==v(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function O(e){var n=E(e,"string");return"symbol"===v(n)?n:String(n)}function x(e,n,t){return(n=O(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function w(e){if(Array.isArray(e))return e}function k(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,l,u=[],a=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;a=!1}else for(;!(a=(r=i.call(t)).done)&&(u.push(r.value),u.length!==n);a=!0);}catch(e){c=!0,o=e}finally{try{if(!a&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(c)throw o}}return u}}function M(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function S(e,n){if(e){if("string"==typeof e)return M(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?M(e,n):void 0}}function C(){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 T(e,n){return w(e)||k(e,n)||S(e,n)||C()}var j=b.extend({defaultProps:{__TYPE:"ColorPicker",appendTo:null,autoFocus:!1,children:void 0,className:null,defaultColor:"ff0000",disabled:!1,format:"hex",id:null,inline:!1,inputClassName:null,inputId:null,inputRef:null,inputStyle:null,onChange:null,onHide:null,onShow:null,panelClassName:null,panelStyle:null,style:null,tabIndex:null,tooltip:null,tooltipOptions:null,transitionOptions:null,value:null}}),N=e.forwardRef((function(r,o){var i,l,u=e.useContext(t),a=(i=p("p-colorpicker-panel",r.panelClassName,{"p-colorpicker-overlay-panel":!r.inline,"p-disabled":r.disabled,"p-input-filled":u&&"filled"===u.inputStyle||"filled"===n.inputStyle,"p-ripple-disabled":u&&!1===u.ripple||!1===n.ripple}),l=s({ref:o,className:i,style:r.panelStyle,onClick:r.onClick},r.ptm("panel")),e.createElement(h,{nodeRef:o,classNames:"p-connected-overlay",in:r.in,timeout:{enter:120,exit:100},options:r.transitionOptions,unmountOnExit:!0,onEnter:r.onEnter,onEntered:r.onEntered,onExit:r.onExit,onExited:r.onExited},e.createElement("div",l,r.children)));return r.inline?a:e.createElement(g,{element:a,appendTo:r.appendTo})}));function P(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function R(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?P(Object(t),!0).forEach((function(n){x(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):P(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}N.displayName="ColorPickerPanel";var I=e.memo(e.forwardRef((function(b,h){var g=e.useContext(t),v=j.getProps(b,g),E=T(e.useState(!1),2),O=E[0],x=E[1],w=j.setMetaData({props:v,state:{overlayVisible:O}}).ptm,k=e.useRef(null),M=e.useRef(null),S=e.useRef(v.inputRef),C=e.useRef(null),P=e.useRef(null),I=e.useRef(null),D=e.useRef(null),Y=e.useRef(!1),A=e.useRef(null),H=e.useRef(!1),F=T(r({target:k,overlay:M,listener:function(e,n){n.valid&&pe()},when:O}),2),z=F[0],B=F[1],X=T(o({type:"mousemove",listener:function(e){H.current&&ee(e),Y.current&&$(e)}}),2),Z=X[0],_=X[1],K=T(o({type:"mouseup",listener:function(){H.current=Y.current=!1,f.removeClass(k.current,"p-colorpicker-dragging"),_(),U()}}),2),L=K[0],U=K[1],V=function(e){v.disabled||(Y.current=!0,$(e),f.addClass(k.current,"p-colorpicker-dragging"))},$=function(e){var n=D.current.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);A.current=me({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-n)))/150),s:100,b:100}),ie(),ue(),ne()},q=function(e){v.disabled||(H.current=!0,ee(e),f.addClass(k.current,"p-colorpicker-dragging"),e.preventDefault())},G=function(e){H.current&&(ee(e),e.preventDefault()),Y.current&&($(e),e.preventDefault())},J=function(){H.current=!1,Y.current=!1,f.removeClass(k.current,"p-colorpicker-dragging"),W()},Q=function(){Z(),L()},W=function(){_(),U()},ee=function(e){var n=C.current.getBoundingClientRect(),t=n.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),r=n.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-r))/150),i=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150);A.current=me({h:A.current.h,s:o,b:i}),le(),ae(),ne()},ne=function(){switch(v.format){case"hex":oe(Ee(A.current));break;case"rgb":oe(ye(A.current));break;case"hsb":oe(A.current)}},te=function(e){var n;if(e)switch(v.format){case"hex":n=he(e);break;case"rgb":n=ge(e);break;case"hsb":n=e}else n=he(v.defaultColor);return n},re=function(e){A.current=te(e)},oe=function(e){v.onChange&&v.onChange({value:e,stopPropagation:function(){},preventDefault:function(){},target:{name:v.name,id:v.id,value:e}})},ie=function(){if(C.current){var e=me({h:A.current.h,s:100,b:100});C.current.style.backgroundColor="#"+Ee(e)}},le=function(){P.current&&(P.current.style.left=Math.floor(150*A.current.s/100)+"px",P.current.style.top=Math.floor(150*(100-A.current.b)/100)+"px")},ue=function(){I.current&&(I.current.style.top=Math.floor(150-150*A.current.h/360)+"px")},ae=function(){S.current&&(S.current.style.backgroundColor="#"+Ee(A.current))},ce=function(){x(!0)},pe=function(){x(!1)},se=function(){fe()},fe=function(){O?pe():ce()},de=function(e){switch(e.which){case 32:fe(),e.preventDefault();break;case 27:case 9:pe()}},me=function(e){return{h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}},be=function(e){var n=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:n>>16,g:(65280&n)>>8,b:255&n}},he=function(e){return ge(be(e))},ge=function(e){var n={h:0,s:0,b:0},t=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b),o=r-t;return n.b=r,n.s=0!==r?255*o/r:0,n.h=0!==n.s?e.r===r?(e.g-e.b)/o:e.g===r?2+(e.b-e.r)/o:4+(e.r-e.g)/o:-1,n.h*=60,n.h<0&&(n.h+=360),n.s*=100/255,n.b*=100/255,n},ye=function(e){var n={r:null,g:null,b:null},t=Math.round(e.h),r=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===r)n={r:o,g:o,b:o};else{var i=o,l=(255-r)*o/255,u=t%60*(i-l)/60;360===t&&(t=0),t<60?(n.r=i,n.b=l,n.g=l+u):t<120?(n.g=i,n.b=l,n.r=i-u):t<180?(n.g=i,n.r=l,n.b=l+u):t<240?(n.b=i,n.r=l,n.g=i-u):t<300?(n.b=i,n.g=l,n.r=l+u):t<360?(n.r=i,n.g=l,n.b=i-u):(n.r=0,n.g=0,n.b=0)}return{r:Math.round(n.r),g:Math.round(n.g),b:Math.round(n.b)}},ve=function(e){var n=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var t in n)1===n[t].length&&(n[t]="0"+n[t]);return n.join("")},Ee=function(e){return ve(ye(e))},Oe=function(){ue(),le(),ae(),ie()},xe=function(){S.current&&f.alignOverlay(M.current,S.current.parentElement,v.appendTo||g&&g.appendTo||n.appendTo)};e.useImperativeHandle(h,(function(){return{props:v,show:ce,hide:pe,focus:function(){return f.focus(S.current)},getElement:function(){return k.current},getOverlay:function(){return M.current},getInput:function(){return S.current}}})),e.useEffect((function(){d.combinedRefs(S,v.inputRef)}),[S,v.inputRef]),i((function(){re(v.value),Oe(),v.autoFocus&&f.focus(S.current,v.autoFocus)})),l((function(){H.current||Y.current||re(v.value)}),[v.value]),l((function(){Oe()})),u((function(){m.clear(M.current)}));var we,ke,Me,Se,Ce,Te,je,Ne,Pe=d.isNotEmpty(v.tooltip),Re=p("p-colorpicker p-component",{"p-colorpicker-overlay":!v.inline},v.className),Ie=(we=s({ref:C,className:"p-colorpicker-color-selector",onMouseDown:function(e){return n=e,void(v.disabled||(Q(),q(n)));var n},onTouchStart:function(e){return q(e)},onTouchMove:function(e){return G(e)},onTouchEnd:J},w("selector")),ke=s({className:"p-colorpicker-color"},w("color")),Me=s({ref:P,className:"p-colorpicker-color-handle"},w("colorHandler")),Te=e.createElement("div",we,e.createElement("div",ke,e.createElement("div",Me))),Se=s({ref:D,className:"p-colorpicker-hue",onMouseDown:function(e){return n=e,void(v.disabled||(Q(),V(n)));var n},onTouchStart:function(e){return V(e)},onTouchMove:function(e){return G(e)},onTouchEnd:J},w("hue")),Ce=s({ref:I,className:"p-colorpicker-hue-handle"},w("hueHandler")),je=e.createElement("div",Se,e.createElement("div",Ce)),Ne=s({className:"p-colorpicker-content"},w("content")),e.createElement("div",Ne,Te,je)),De=function(){if(!v.inline){var n=p("p-colorpicker-preview p-inputtext",v.inputClassName,{"p-disabled":v.disabled}),t=j.getOtherProps(v),r=s(R({ref:S,type:"text",readOnly:!0,className:n,style:v.inputStyle,id:v.inputId,tabIndex:v.tabIndex,disabled:v.disabled,onClick:se,onKeyDown:de},t),w("input"));return e.createElement("input",r)}return null}(),Ye=s({id:v.id,ref:k,style:v.style,className:Re},j.getOtherProps(v),w("root"));return e.createElement(e.Fragment,null,e.createElement("div",Ye,De,e.createElement(N,{ref:M,appendTo:v.appendTo,inline:v.inline,disabled:v.disabled,panelStyle:v.panelStyle,panelClassName:v.panelClassName,onClick:function(e){v.inline||a.emit("overlay-click",{originalEvent:e,target:k.current})},in:v.inline||O,onEnter:function(){m.set("overlay",M.current,g&&g.autoZIndex||n.autoZIndex,g&&g.zIndex.overlay||n.zIndex.overlay),xe()},onEntered:function(){z(),v.onShow&&v.onShow()},onExit:function(){B()},onExited:function(){m.clear(M.current),v.onHide&&v.onHide()},transitionOptions:v.transitionOptions,ptm:w},Ie)),Pe&&e.createElement(c,y({target:k,content:v.tooltip},v.tooltipOptions,{pt:w("tooltip")})))})));I.displayName="ColorPicker";export{I as ColorPicker};

package/colorpicker/colorpicker.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, overlayservice, tooltip, utils, csstransition, portal) {
+this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, overlayservice, tooltip, utils, componentbase, csstransition, portal) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -40,6 +40,47 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
     return _extends.apply(this, arguments);
   }
 
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
+  }
+
+  function _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
+  function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -95,7 +136,7 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var ColorPickerBase = {
+  var ColorPickerBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'ColorPicker',
       appendTo: null,
@@ -122,23 +163,24 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
       tooltipOptions: null,
       transitionOptions: null,
       value: null
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, ColorPickerBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, ColorPickerBase.defaultProps);
     }
-  };
+  });
 
   var ColorPickerPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
     var createElement = function createElement() {
       var className = utils.classNames('p-colorpicker-panel', props.panelClassName, {
         'p-colorpicker-overlay-panel': !props.inline,
         'p-disabled': props.disabled,
-        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
-        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+        'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
       });
+      var panelProps = utils.mergeProps({
+        ref: ref,
+        className: className,
+        style: props.panelStyle,
+        onClick: props.onClick
+      }, props.ptm('panel'));
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: ref,
         classNames: "p-connected-overlay",
@@ -153,12 +195,7 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
         onEntered: props.onEntered,
         onExit: props.onExit,
         onExited: props.onExited
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        ref: ref,
-        className: className,
-        style: props.panelStyle,
-        onClick: props.onClick
-      }, props.children));
+      }, /*#__PURE__*/React__namespace.createElement("div", panelProps, props.children));
     };
     var element = createElement();
     return props.inline ? element : /*#__PURE__*/React__namespace.createElement(portal.Portal, {
@@ -168,12 +205,22 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
   });
   ColorPickerPanel.displayName = 'ColorPickerPanel';
 
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var ColorPicker = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = ColorPickerBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = ColorPickerBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       overlayVisibleState = _React$useState2[0],
       setOverlayVisibleState = _React$useState2[1];
+    var _ColorPickerBase$setM = ColorPickerBase.setMetaData({
+        props: props,
+        state: {
+          overlayVisible: overlayVisibleState
+        }
+      }),
+      ptm = _ColorPickerBase$setM.ptm;
     var elementRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
@@ -389,7 +436,7 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
       setOverlayVisibleState(false);
     };
     var onOverlayEnter = function onOverlayEnter() {
-      utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
+      utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['overlay'] || PrimeReact__default["default"].zIndex['overlay']);
       alignOverlay();
     };
     var onOverlayEntered = function onOverlayEntered() {
@@ -548,7 +595,7 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
     };
     var alignOverlay = function alignOverlay() {
       if (inputRef.current) {
-        utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact__default["default"].appendTo);
+        utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo);
       }
     };
     React__namespace.useImperativeHandle(ref, function () {
@@ -592,39 +639,57 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
       utils.ZIndexUtils.clear(overlayRef.current);
     });
     var createColorSelector = function createColorSelector() {
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      var selectorProps = utils.mergeProps({
         ref: colorSelectorRef,
-        className: "p-colorpicker-color-selector",
-        onMouseDown: onColorMousedown,
-        onTouchStart: onColorDragStart,
-        onTouchMove: onDrag,
+        className: 'p-colorpicker-color-selector',
+        onMouseDown: function onMouseDown(e) {
+          return onColorMousedown(e);
+        },
+        onTouchStart: function onTouchStart(e) {
+          return onColorDragStart(e);
+        },
+        onTouchMove: function onTouchMove(e) {
+          return onDrag(e);
+        },
         onTouchEnd: onDragEnd
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-colorpicker-color"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
+      }, ptm('selector'));
+      var colorProps = utils.mergeProps({
+        className: 'p-colorpicker-color'
+      }, ptm('color'));
+      var colorHandlerProps = utils.mergeProps({
         ref: colorHandleRef,
-        className: "p-colorpicker-color-handle"
-      })));
+        className: 'p-colorpicker-color-handle'
+      }, ptm('colorHandler'));
+      return /*#__PURE__*/React__namespace.createElement("div", selectorProps, /*#__PURE__*/React__namespace.createElement("div", colorProps, /*#__PURE__*/React__namespace.createElement("div", colorHandlerProps)));
     };
     var createHue = function createHue() {
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      var hueProps = utils.mergeProps({
         ref: hueViewRef,
-        className: "p-colorpicker-hue",
-        onMouseDown: onHueMousedown,
-        onTouchStart: onHueDragStart,
-        onTouchMove: onDrag,
+        className: 'p-colorpicker-hue',
+        onMouseDown: function onMouseDown(e) {
+          return onHueMousedown(e);
+        },
+        onTouchStart: function onTouchStart(e) {
+          return onHueDragStart(e);
+        },
+        onTouchMove: function onTouchMove(e) {
+          return onDrag(e);
+        },
         onTouchEnd: onDragEnd
-      }, /*#__PURE__*/React__namespace.createElement("div", {
+      }, ptm('hue'));
+      var hueHandlerProps = utils.mergeProps({
         ref: hueHandleRef,
-        className: "p-colorpicker-hue-handle"
-      }));
+        className: 'p-colorpicker-hue-handle'
+      }, ptm('hueHandler'));
+      return /*#__PURE__*/React__namespace.createElement("div", hueProps, /*#__PURE__*/React__namespace.createElement("div", hueHandlerProps));
     };
     var createContent = function createContent() {
       var colorSelector = createColorSelector();
       var hue = createHue();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-colorpicker-content"
-      }, colorSelector, hue);
+      var contentProps = utils.mergeProps({
+        className: 'p-colorpicker-content'
+      }, ptm('content'));
+      return /*#__PURE__*/React__namespace.createElement("div", contentProps, colorSelector, hue);
     };
     var createInput = function createInput() {
       if (!props.inline) {
@@ -632,9 +697,9 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
           'p-disabled': props.disabled
         });
         var inputProps = ColorPickerBase.getOtherProps(props);
-        return /*#__PURE__*/React__namespace.createElement("input", _extends({
+        var _inputProps = utils.mergeProps(_objectSpread({
           ref: inputRef,
-          type: "text",
+          type: 'text',
           readOnly: true,
           className: inputClassName,
           style: props.inputStyle,
@@ -643,23 +708,24 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
           disabled: props.disabled,
           onClick: onInputClick,
           onKeyDown: onInputKeydown
-        }, inputProps));
+        }, inputProps), ptm('input'));
+        return /*#__PURE__*/React__namespace.createElement("input", _inputProps);
       }
       return null;
     };
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
-    var otherProps = ColorPickerBase.getOtherProps(props);
     var className = utils.classNames('p-colorpicker p-component', {
       'p-colorpicker-overlay': !props.inline
     }, props.className);
     var content = createContent();
     var input = createInput();
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
-      ref: elementRef,
+    var rootProps = utils.mergeProps({
       id: props.id,
+      ref: elementRef,
       style: props.style,
       className: className
-    }, otherProps), input, /*#__PURE__*/React__namespace.createElement(ColorPickerPanel, {
+    }, ColorPickerBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, input, /*#__PURE__*/React__namespace.createElement(ColorPickerPanel, {
       ref: overlayRef,
       appendTo: props.appendTo,
       inline: props.inline,
@@ -672,11 +738,14 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
       onEntered: onOverlayEntered,
       onExit: onOverlayExit,
       onExited: onOverlayExited,
-      transitionOptions: props.transitionOptions
+      transitionOptions: props.transitionOptions,
+      ptm: ptm
     }, content)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   ColorPicker.displayName = 'ColorPicker';
 
@@ -686,4 +755,4 @@ this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, over
 
   return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.csstransition, primereact.portal);
+})({}, React, primereact.api, primereact.hooks, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.csstransition, primereact.portal);