primereact 8.7.2 → 8.7.3

package/colorpicker/colorpicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { CSSTransitionProps } from '../csstransition';
+import TooltipOptions from '../tooltip/tooltipoptions';
 
 type ColorPickerAppendToType = 'self' | HTMLElement | undefined | null;
 
@@ -34,20 +34,22 @@ interface ColorPickerChangeParams {
 }
 
 export interface ColorPickerProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onChange' | 'value' | 'ref'> {
-    inputRef?: React.Ref<HTMLInputElement>;
-    value?: ColorPickerValueType;
+    appendTo?: ColorPickerAppendToType;
+    children?: React.ReactNode;
     defaultColor?: string;
-    inline?: boolean;
     format?: string;
-    appendTo?: ColorPickerAppendToType;
+    inline?: boolean;
     inputId?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    panelClassName?: string | undefined;
+    panelStyle?: React.CSSProperties | undefined;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     transitionOptions?: CSSTransitionProps;
+    value?: ColorPickerValueType;
     onChange?(e: ColorPickerChangeParams): void;
     onShow?(): void;
     onHide?(): void;
-    children?: React.ReactNode;
 }
 
 export declare class ColorPicker extends React.Component<ColorPickerProps, any> {

package/colorpicker/colorpicker.esm.js

@@ -11,14 +11,12 @@ 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);
@@ -29,42 +27,40 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+        ;
+      }
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-
-  return _arr;
 }
 
 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];
   }
-
   return arr2;
 }
 
@@ -87,7 +83,7 @@ function _slicedToArray(arr, i) {
 
 var ColorPickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var createElement = function createElement() {
-    var className = classNames('p-colorpicker-panel', {
+    var className = classNames('p-colorpicker-panel', props.panelClassName, {
       'p-colorpicker-overlay-panel': !props.inline,
       'p-disabled': props.disabled
     });
@@ -108,10 +104,10 @@ var ColorPickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, /*#__PURE__*/React.createElement("div", {
       ref: ref,
       className: className,
+      style: props.panelStyle,
       onClick: props.onClick
     }, props.children));
   };
-
   var element = createElement();
   return props.inline ? element : /*#__PURE__*/React.createElement(Portal, {
     element: element,
@@ -122,10 +118,9 @@ ColorPickerPanel.displayName = 'ColorPickerPanel';
 
 var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      overlayVisibleState = _React$useState2[0],
-      setOverlayVisibleState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    overlayVisibleState = _React$useState2[0],
+    setOverlayVisibleState = _React$useState2[1];
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
@@ -136,44 +131,40 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var hueDragging = React.useRef(false);
   var hsbValue = React.useRef(null);
   var colorDragging = React.useRef(false);
-
   var _useOverlayListener = useOverlayListener({
-    target: elementRef,
-    overlay: overlayRef,
-    listener: function listener(event, _ref) {
-      var valid = _ref.valid;
-      valid && hide();
-    },
-    when: overlayVisibleState
-  }),
-      _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
-      bindOverlayListener = _useOverlayListener2[0],
-      unbindOverlayListener = _useOverlayListener2[1];
-
+      target: elementRef,
+      overlay: overlayRef,
+      listener: function listener(event, _ref) {
+        var valid = _ref.valid;
+        valid && hide();
+      },
+      when: overlayVisibleState
+    }),
+    _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
+    bindOverlayListener = _useOverlayListener2[0],
+    unbindOverlayListener = _useOverlayListener2[1];
   var _useEventListener = useEventListener({
-    type: 'mousemove',
-    listener: function listener(event) {
-      colorDragging.current && pickColor(event);
-      hueDragging.current && pickHue(event);
-    }
-  }),
-      _useEventListener2 = _slicedToArray(_useEventListener, 2),
-      bindDocumentMouseMoveListener = _useEventListener2[0],
-      unbindDocumentMouseMoveListener = _useEventListener2[1];
-
+      type: 'mousemove',
+      listener: function listener(event) {
+        colorDragging.current && pickColor(event);
+        hueDragging.current && pickHue(event);
+      }
+    }),
+    _useEventListener2 = _slicedToArray(_useEventListener, 2),
+    bindDocumentMouseMoveListener = _useEventListener2[0],
+    unbindDocumentMouseMoveListener = _useEventListener2[1];
   var _useEventListener3 = useEventListener({
-    type: 'mouseup',
-    listener: function listener() {
-      colorDragging.current = hueDragging.current = false;
-      DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
-      unbindDocumentMouseMoveListener();
-      unbindDocumentMouseUpListener();
-    }
-  }),
-      _useEventListener4 = _slicedToArray(_useEventListener3, 2),
-      bindDocumentMouseUpListener = _useEventListener4[0],
-      unbindDocumentMouseUpListener = _useEventListener4[1];
-
+      type: 'mouseup',
+      listener: function listener() {
+        colorDragging.current = hueDragging.current = false;
+        DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
+        unbindDocumentMouseMoveListener();
+        unbindDocumentMouseUpListener();
+      }
+    }),
+    _useEventListener4 = _slicedToArray(_useEventListener3, 2),
+    bindDocumentMouseUpListener = _useEventListener4[0],
+    unbindDocumentMouseUpListener = _useEventListener4[1];
   var onPanelClick = function onPanelClick(event) {
     if (!props.inline) {
       OverlayService.emit('overlay-click', {
@@ -182,26 +173,21 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       });
     }
   };
-
   var onHueMousedown = function onHueMousedown(event) {
     if (props.disabled) {
       return;
     }
-
     bindDragListeners();
     onHueDragStart(event);
   };
-
   var onHueDragStart = function onHueDragStart(event) {
     if (props.disabled) {
       return;
     }
-
     hueDragging.current = true;
     pickHue(event);
     DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
   };
-
   var pickHue = function pickHue(event) {
     var top = hueViewRef.current.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
     hsbValue.current = validateHSB({
@@ -213,56 +199,46 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     updateHue();
     updateModel();
   };
-
   var onColorMousedown = function onColorMousedown(event) {
     if (props.disabled) {
       return;
     }
-
     bindDragListeners();
     onColorDragStart(event);
   };
-
   var onColorDragStart = function onColorDragStart(event) {
     if (props.disabled) {
       return;
     }
-
     colorDragging.current = true;
     pickColor(event);
     DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
     event.preventDefault();
   };
-
   var onDrag = function onDrag(event) {
     if (colorDragging.current) {
       pickColor(event);
       event.preventDefault();
     }
-
     if (hueDragging.current) {
       pickHue(event);
       event.preventDefault();
     }
   };
-
   var onDragEnd = function onDragEnd() {
     colorDragging.current = false;
     hueDragging.current = false;
     DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
     unbindDragListeners();
   };
-
   var bindDragListeners = function bindDragListeners() {
     bindDocumentMouseMoveListener();
     bindDocumentMouseUpListener();
   };
-
   var unbindDragListeners = function unbindDragListeners() {
     unbindDocumentMouseMoveListener();
     unbindDocumentMouseUpListener();
   };
-
   var pickColor = function pickColor(event) {
     var rect = colorSelectorRef.current.getBoundingClientRect();
     var top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
@@ -278,36 +254,29 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     updateInput();
     updateModel();
   };
-
   var updateModel = function updateModel() {
     switch (props.format) {
       case 'hex':
         onChange(HSBtoHEX(hsbValue.current));
         break;
-
       case 'rgb':
         onChange(HSBtoRGB(hsbValue.current));
         break;
-
       case 'hsb':
         onChange(hsbValue.current);
         break;
     }
   };
-
   var toHSB = function toHSB(value) {
     var hsb;
-
     if (value) {
       switch (props.format) {
         case 'hex':
           hsb = HEXtoHSB(value);
           break;
-
         case 'rgb':
           hsb = RGBtoHSB(value);
           break;
-
         case 'hsb':
           hsb = value;
           break;
@@ -315,14 +284,11 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     } else {
       hsb = HEXtoHSB(props.defaultColor);
     }
-
     return hsb;
   };
-
   var updateHSBValue = function updateHSBValue(value) {
     hsbValue.current = toHSB(value);
   };
-
   var onChange = function onChange(value) {
     if (props.onChange) {
       props.onChange({
@@ -337,7 +303,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       });
     }
   };
-
   var updateColorSelector = function updateColorSelector() {
     if (colorSelectorRef.current) {
       var newHsbValue = validateHSB({
@@ -348,61 +313,49 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       colorSelectorRef.current.style.backgroundColor = '#' + HSBtoHEX(newHsbValue);
     }
   };
-
   var updateColorHandle = function updateColorHandle() {
     if (colorHandleRef.current) {
       colorHandleRef.current.style.left = Math.floor(150 * hsbValue.current.s / 100) + 'px';
       colorHandleRef.current.style.top = Math.floor(150 * (100 - hsbValue.current.b) / 100) + 'px';
     }
   };
-
   var updateHue = function updateHue() {
     if (hueHandleRef.current) {
       hueHandleRef.current.style.top = Math.floor(150 - 150 * hsbValue.current.h / 360) + 'px';
     }
   };
-
   var updateInput = function updateInput() {
     if (inputRef.current) {
       inputRef.current.style.backgroundColor = '#' + HSBtoHEX(hsbValue.current);
     }
   };
-
   var show = function show() {
     setOverlayVisibleState(true);
   };
-
   var hide = function hide() {
     setOverlayVisibleState(false);
   };
-
   var onOverlayEnter = function onOverlayEnter() {
     ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
     alignOverlay();
   };
-
   var onOverlayEntered = function onOverlayEntered() {
     bindOverlayListener();
     props.onShow && props.onShow();
   };
-
   var onOverlayExit = function onOverlayExit() {
     unbindOverlayListener();
   };
-
   var onOverlayExited = function onOverlayExited() {
     ZIndexUtils.clear(overlayRef.current);
     props.onHide && props.onHide();
   };
-
   var onInputClick = function onInputClick() {
     togglePanel();
   };
-
   var togglePanel = function togglePanel() {
     overlayVisibleState ? hide() : show();
   };
-
   var onInputKeydown = function onInputKeydown(event) {
     switch (event.which) {
       //space
@@ -410,15 +363,14 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         togglePanel();
         event.preventDefault();
         break;
-      //escape and tab
 
+      //escape and tab
       case 27:
       case 9:
         hide();
         break;
     }
   };
-
   var validateHSB = function validateHSB(hsb) {
     return {
       h: Math.min(360, Math.max(0, hsb.h)),
@@ -426,7 +378,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       b: Math.min(100, Math.max(0, hsb.b))
     };
   };
-
   var HEXtoRGB = function HEXtoRGB(hex) {
     var hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
     return {
@@ -435,11 +386,9 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       b: hexValue & 0x0000ff
     };
   };
-
   var HEXtoHSB = function HEXtoHSB(hex) {
     return RGBtoHSB(HEXtoRGB(hex));
   };
-
   var RGBtoHSB = function RGBtoHSB(rgb) {
     var hsb = {
       h: 0,
@@ -451,7 +400,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     var delta = max - min;
     hsb.b = max;
     hsb.s = max !== 0 ? 255 * delta / max : 0;
-
     if (hsb.s !== 0) {
       if (rgb.r === max) {
         hsb.h = (rgb.g - rgb.b) / delta;
@@ -463,18 +411,14 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     } else {
       hsb.h = -1;
     }
-
     hsb.h *= 60;
-
     if (hsb.h < 0) {
       hsb.h += 360;
     }
-
     hsb.s *= 100 / 255;
     hsb.b *= 100 / 255;
     return hsb;
   };
-
   var HSBtoRGB = function HSBtoRGB(hsb) {
     var rgb = {
       r: null,
@@ -484,7 +428,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     var h = Math.round(hsb.h);
     var s = Math.round(hsb.s * 255 / 100);
     var v = Math.round(hsb.b * 255 / 100);
-
     if (s === 0) {
       rgb = {
         r: v,
@@ -496,7 +439,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       var t2 = (255 - s) * v / 255;
       var t3 = (t1 - t2) * (h % 60) / 60;
       if (h === 360) h = 0;
-
       if (h < 60) {
         rgb.r = t1;
         rgb.b = t2;
@@ -527,43 +469,35 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         rgb.b = 0;
       }
     }
-
     return {
       r: Math.round(rgb.r),
       g: Math.round(rgb.g),
       b: Math.round(rgb.b)
     };
   };
-
   var RGBtoHEX = function RGBtoHEX(rgb) {
     var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
-
     for (var key in hex) {
       if (hex[key].length === 1) {
         hex[key] = '0' + hex[key];
       }
     }
-
     return hex.join('');
   };
-
   var HSBtoHEX = function HSBtoHEX(hsb) {
     return RGBtoHEX(HSBtoRGB(hsb));
   };
-
   var updateUI = function updateUI() {
     updateHue();
     updateColorHandle();
     updateInput();
     updateColorSelector();
   };
-
   var alignOverlay = function alignOverlay() {
     if (inputRef.current) {
       DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
     }
   };
-
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -598,7 +532,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   useUnmountEffect(function () {
     ZIndexUtils.clear(overlayRef.current);
   });
-
   var createColorSelector = function createColorSelector() {
     return /*#__PURE__*/React.createElement("div", {
       ref: colorSelectorRef,
@@ -614,7 +547,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       className: "p-colorpicker-color-handle"
     })));
   };
-
   var createHue = function createHue() {
     return /*#__PURE__*/React.createElement("div", {
       ref: hueViewRef,
@@ -628,7 +560,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       className: "p-colorpicker-hue-handle"
     }));
   };
-
   var createContent = function createContent() {
     var colorSelector = createColorSelector();
     var hue = createHue();
@@ -636,7 +567,6 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       className: "p-colorpicker-content"
     }, colorSelector, hue);
   };
-
   var createInput = function createInput() {
     if (!props.inline) {
       var inputClassName = classNames('p-colorpicker-preview p-inputtext', {
@@ -655,10 +585,8 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         onKeyDown: onInputKeydown
       }, inputProps));
     }
-
     return null;
   };
-
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = ObjectUtils.findDiffKeys(props, ColorPicker.defaultProps);
   var className = classNames('p-colorpicker p-component', {
@@ -676,6 +604,8 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     appendTo: props.appendTo,
     inline: props.inline,
     disabled: props.disabled,
+    panelStyle: props.panelStyle,
+    panelClassName: props.panelClassName,
     onClick: onPanelClick,
     "in": props.inline || overlayVisibleState,
     onEnter: onOverlayEnter,
@@ -691,24 +621,26 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
 ColorPicker.displayName = 'ColorPicker';
 ColorPicker.defaultProps = {
   __TYPE: 'ColorPicker',
-  id: null,
-  inputRef: null,
-  value: null,
-  style: null,
+  appendTo: null,
   className: null,
   defaultColor: 'ff0000',
-  inline: false,
-  format: 'hex',
-  appendTo: null,
   disabled: false,
-  tabIndex: null,
+  format: 'hex',
+  id: null,
+  inline: false,
   inputId: null,
+  inputRef: null,
+  onChange: null,
+  onHide: null,
+  onShow: null,
+  panelClassName: null,
+  panelStyle: null,
+  style: null,
+  tabIndex: null,
   tooltip: null,
   tooltipOptions: null,
   transitionOptions: null,
-  onChange: null,
-  onShow: null,
-  onHide: null
+  value: null
 };
 
 export { 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 i,useUnmountEffect as a}from"primereact/hooks";import{OverlayService as c}from"primereact/overlayservice";import{Tooltip as l}from"primereact/tooltip";import{classNames as u,DomHandler as s,ObjectUtils as f,ZIndexUtils as p}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,i=[],a=!0,c=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==t.return||t.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 k(e,n){return g(e)||b(e,n)||y(e,n)||E()}var x=e.forwardRef((function(n,t){var r,o=(r=u("p-colorpicker-panel",{"p-colorpicker-overlay-panel":!n.inline,"p-disabled":n.disabled}),e.createElement(d,{nodeRef:t,classNames:"p-connected-overlay",in:n.in,timeout:{enter:120,exit:100},options:n.transitionOptions,unmountOnExit:!0,onEnter:n.onEnter,onEntered:n.onEntered,onExit:n.onExit,onExited:n.onExited},e.createElement("div",{ref:t,className:r,onClick:n.onClick},n.children)));return n.inline?o:e.createElement(m,{element:o,appendTo:n.appendTo})}));x.displayName="ColorPickerPanel";var M=e.memo(e.forwardRef((function(d,m){var g=k(e.useState(!1),2),b=g[0],v=g[1],y=e.useRef(null),E=e.useRef(null),w=e.useRef(d.inputRef),T=e.useRef(null),C=e.useRef(null),R=e.useRef(null),O=e.useRef(null),N=e.useRef(!1),S=e.useRef(null),I=e.useRef(!1),D=k(t({target:y,overlay:E,listener:function(e,n){n.valid&&ae()},when:b}),2),P=D[0],j=D[1],Y=k(r({type:"mousemove",listener:function(e){I.current&&J(e),N.current&&F(e)}}),2),A=Y[0],H=Y[1],K=k(r({type:"mouseup",listener:function(){I.current=N.current=!1,s.removeClass(y.current,"p-colorpicker-dragging"),H(),X()}}),2),B=K[0],X=K[1],_=function(e){d.disabled||(q(),z(e))},z=function(e){d.disabled||(N.current=!0,F(e),s.addClass(y.current,"p-colorpicker-dragging"))},F=function(e){var n=O.current.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);S.current=se({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-n)))/150),s:100,b:100}),ne(),re(),Q()},L=function(e){d.disabled||(q(),U(e))},U=function(e){d.disabled||(I.current=!0,J(e),s.addClass(y.current,"p-colorpicker-dragging"),e.preventDefault())},Z=function(e){I.current&&(J(e),e.preventDefault()),N.current&&(F(e),e.preventDefault())},$=function(){I.current=!1,N.current=!1,s.removeClass(y.current,"p-colorpicker-dragging"),G()},q=function(){A(),B()},G=function(){H(),X()},J=function(e){var n=T.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);S.current=se({h:S.current.h,s:o,b:i}),te(),oe(),Q()},Q=function(){switch(d.format){case"hex":ee(ge(S.current));break;case"rgb":ee(me(S.current));break;case"hsb":ee(S.current)}},V=function(e){var n;if(e)switch(d.format){case"hex":n=pe(e);break;case"rgb":n=de(e);break;case"hsb":n=e}else n=pe(d.defaultColor);return n},W=function(e){S.current=V(e)},ee=function(e){d.onChange&&d.onChange({value:e,stopPropagation:function(){},preventDefault:function(){},target:{name:d.name,id:d.id,value:e}})},ne=function(){if(T.current){var e=se({h:S.current.h,s:100,b:100});T.current.style.backgroundColor="#"+ge(e)}},te=function(){C.current&&(C.current.style.left=Math.floor(150*S.current.s/100)+"px",C.current.style.top=Math.floor(150*(100-S.current.b)/100)+"px")},re=function(){R.current&&(R.current.style.top=Math.floor(150-150*S.current.h/360)+"px")},oe=function(){w.current&&(w.current.style.backgroundColor="#"+ge(S.current))},ie=function(){v(!0)},ae=function(){v(!1)},ce=function(){le()},le=function(){b?ae():ie()},ue=function(e){switch(e.which){case 32:le(),e.preventDefault();break;case 27:case 9:ae()}},se=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}},pe=function(e){return de(fe(e))},de=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},me=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,a=(255-r)*o/255,c=t%60*(i-a)/60;360===t&&(t=0),t<60?(n.r=i,n.b=a,n.g=a+c):t<120?(n.g=i,n.b=a,n.r=i-c):t<180?(n.g=i,n.r=a,n.b=a+c):t<240?(n.b=i,n.r=a,n.g=i-c):t<300?(n.b=i,n.g=a,n.r=a+c):t<360?(n.r=i,n.g=a,n.b=i-c):(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)}},he=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("")},ge=function(e){return he(me(e))},be=function(){re(),te(),oe(),ne()},ve=function(){w.current&&s.alignOverlay(E.current,w.current.parentElement,d.appendTo||n.appendTo)};e.useImperativeHandle(m,(function(){return{props:d,show:ie,hide:ae,getElement:function(){return y.current},getOverlay:function(){return E.current},getInput:function(){return w.current}}})),e.useEffect((function(){f.combinedRefs(w,d.inputRef)}),[w,d.inputRef]),o((function(){W(d.value),be()})),i((function(){I.current||N.current||W(d.value)}),[d.value]),i((function(){be()})),a((function(){p.clear(E.current)}));var ye=f.isNotEmpty(d.tooltip),Ee=f.findDiffKeys(d,M.defaultProps),ke=u("p-colorpicker p-component",{"p-colorpicker-overlay":!d.inline},d.className),xe=e.createElement("div",{className:"p-colorpicker-content"},e.createElement("div",{ref:T,className:"p-colorpicker-color-selector",onMouseDown:L,onTouchStart:U,onTouchMove:Z,onTouchEnd:$},e.createElement("div",{className:"p-colorpicker-color"},e.createElement("div",{ref:C,className:"p-colorpicker-color-handle"}))),e.createElement("div",{ref:O,className:"p-colorpicker-hue",onMouseDown:_,onTouchStart:z,onTouchMove:Z,onTouchEnd:$},e.createElement("div",{ref:R,className:"p-colorpicker-hue-handle"}))),Me=function(){if(!d.inline){var n=u("p-colorpicker-preview p-inputtext",{"p-disabled":d.disabled}),t=f.findDiffKeys(d,M.defaultProps);return e.createElement("input",h({ref:w,type:"text",className:n,readOnly:!0,id:d.inputId,tabIndex:d.tabIndex,disabled:d.disabled,onClick:ce,onKeyDown:ue},t))}return null}();return e.createElement(e.Fragment,null,e.createElement("div",h({ref:y,id:d.id,style:d.style,className:ke},Ee),Me,e.createElement(x,{ref:E,appendTo:d.appendTo,inline:d.inline,disabled:d.disabled,onClick:function(e){d.inline||c.emit("overlay-click",{originalEvent:e,target:y.current})},in:d.inline||b,onEnter:function(){p.set("overlay",E.current,n.autoZIndex,n.zIndex.overlay),ve()},onEntered:function(){P(),d.onShow&&d.onShow()},onExit:function(){j()},onExited:function(){p.clear(E.current),d.onHide&&d.onHide()},transitionOptions:d.transitionOptions},xe)),ye&&e.createElement(l,h({target:y,content:d.tooltip},d.tooltipOptions)))})));M.displayName="ColorPicker",M.defaultProps={__TYPE:"ColorPicker",id:null,inputRef:null,value:null,style:null,className:null,defaultColor:"ff0000",inline:!1,format:"hex",appendTo:null,disabled:!1,tabIndex:null,inputId:null,tooltip:null,tooltipOptions:null,transitionOptions:null,onChange:null,onShow:null,onHide:null};export{M as ColorPicker};
+import*as e from"react";import n from"primereact/api";import{useOverlayListener as t,useEventListener as r,useMountEffect as o,useUpdateEffect as a,useUnmountEffect as l}from"primereact/hooks";import{OverlayService as i}from"primereact/overlayservice";import{Tooltip as c}from"primereact/tooltip";import{classNames as u,DomHandler as s,ObjectUtils as f,ZIndexUtils as p}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,a,l,i=[],c=!0,u=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(r=a.call(t)).done)&&(i.push(r.value),i.length!==n);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(u)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 k(e,n){return g(e)||b(e,n)||y(e,n)||E()}var x=e.forwardRef((function(n,t){var r,o=(r=u("p-colorpicker-panel",n.panelClassName,{"p-colorpicker-overlay-panel":!n.inline,"p-disabled":n.disabled}),e.createElement(d,{nodeRef:t,classNames:"p-connected-overlay",in:n.in,timeout:{enter:120,exit:100},options:n.transitionOptions,unmountOnExit:!0,onEnter:n.onEnter,onEntered:n.onEntered,onExit:n.onExit,onExited:n.onExited},e.createElement("div",{ref:t,className:r,style:n.panelStyle,onClick:n.onClick},n.children)));return n.inline?o:e.createElement(m,{element:o,appendTo:n.appendTo})}));x.displayName="ColorPickerPanel";var M=e.memo(e.forwardRef((function(d,m){var g=k(e.useState(!1),2),b=g[0],v=g[1],y=e.useRef(null),E=e.useRef(null),C=e.useRef(d.inputRef),w=e.useRef(null),T=e.useRef(null),O=e.useRef(null),R=e.useRef(null),N=e.useRef(!1),S=e.useRef(null),I=e.useRef(!1),D=k(t({target:y,overlay:E,listener:function(e,n){n.valid&&le()},when:b}),2),P=D[0],j=D[1],Y=k(r({type:"mousemove",listener:function(e){I.current&&J(e),N.current&&F(e)}}),2),A=Y[0],H=Y[1],K=k(r({type:"mouseup",listener:function(){I.current=N.current=!1,s.removeClass(y.current,"p-colorpicker-dragging"),H(),X()}}),2),B=K[0],X=K[1],_=function(e){d.disabled||(q(),z(e))},z=function(e){d.disabled||(N.current=!0,F(e),s.addClass(y.current,"p-colorpicker-dragging"))},F=function(e){var n=R.current.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);S.current=se({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-n)))/150),s:100,b:100}),ne(),re(),Q()},L=function(e){d.disabled||(q(),U(e))},U=function(e){d.disabled||(I.current=!0,J(e),s.addClass(y.current,"p-colorpicker-dragging"),e.preventDefault())},Z=function(e){I.current&&(J(e),e.preventDefault()),N.current&&(F(e),e.preventDefault())},$=function(){I.current=!1,N.current=!1,s.removeClass(y.current,"p-colorpicker-dragging"),G()},q=function(){A(),B()},G=function(){H(),X()},J=function(e){var n=w.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),a=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150);S.current=se({h:S.current.h,s:o,b:a}),te(),oe(),Q()},Q=function(){switch(d.format){case"hex":ee(ge(S.current));break;case"rgb":ee(me(S.current));break;case"hsb":ee(S.current)}},V=function(e){var n;if(e)switch(d.format){case"hex":n=pe(e);break;case"rgb":n=de(e);break;case"hsb":n=e}else n=pe(d.defaultColor);return n},W=function(e){S.current=V(e)},ee=function(e){d.onChange&&d.onChange({value:e,stopPropagation:function(){},preventDefault:function(){},target:{name:d.name,id:d.id,value:e}})},ne=function(){if(w.current){var e=se({h:S.current.h,s:100,b:100});w.current.style.backgroundColor="#"+ge(e)}},te=function(){T.current&&(T.current.style.left=Math.floor(150*S.current.s/100)+"px",T.current.style.top=Math.floor(150*(100-S.current.b)/100)+"px")},re=function(){O.current&&(O.current.style.top=Math.floor(150-150*S.current.h/360)+"px")},oe=function(){C.current&&(C.current.style.backgroundColor="#"+ge(S.current))},ae=function(){v(!0)},le=function(){v(!1)},ie=function(){ce()},ce=function(){b?le():ae()},ue=function(e){switch(e.which){case 32:ce(),e.preventDefault();break;case 27:case 9:le()}},se=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}},pe=function(e){return de(fe(e))},de=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},me=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 a=o,l=(255-r)*o/255,i=t%60*(a-l)/60;360===t&&(t=0),t<60?(n.r=a,n.b=l,n.g=l+i):t<120?(n.g=a,n.b=l,n.r=a-i):t<180?(n.g=a,n.r=l,n.b=l+i):t<240?(n.b=a,n.r=l,n.g=a-i):t<300?(n.b=a,n.g=l,n.r=l+i):t<360?(n.r=a,n.g=l,n.b=a-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)}},he=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("")},ge=function(e){return he(me(e))},be=function(){re(),te(),oe(),ne()},ve=function(){C.current&&s.alignOverlay(E.current,C.current.parentElement,d.appendTo||n.appendTo)};e.useImperativeHandle(m,(function(){return{props:d,show:ae,hide:le,getElement:function(){return y.current},getOverlay:function(){return E.current},getInput:function(){return C.current}}})),e.useEffect((function(){f.combinedRefs(C,d.inputRef)}),[C,d.inputRef]),o((function(){W(d.value),be()})),a((function(){I.current||N.current||W(d.value)}),[d.value]),a((function(){be()})),l((function(){p.clear(E.current)}));var ye=f.isNotEmpty(d.tooltip),Ee=f.findDiffKeys(d,M.defaultProps),ke=u("p-colorpicker p-component",{"p-colorpicker-overlay":!d.inline},d.className),xe=e.createElement("div",{className:"p-colorpicker-content"},e.createElement("div",{ref:w,className:"p-colorpicker-color-selector",onMouseDown:L,onTouchStart:U,onTouchMove:Z,onTouchEnd:$},e.createElement("div",{className:"p-colorpicker-color"},e.createElement("div",{ref:T,className:"p-colorpicker-color-handle"}))),e.createElement("div",{ref:R,className:"p-colorpicker-hue",onMouseDown:_,onTouchStart:z,onTouchMove:Z,onTouchEnd:$},e.createElement("div",{ref:O,className:"p-colorpicker-hue-handle"}))),Me=function(){if(!d.inline){var n=u("p-colorpicker-preview p-inputtext",{"p-disabled":d.disabled}),t=f.findDiffKeys(d,M.defaultProps);return e.createElement("input",h({ref:C,type:"text",className:n,readOnly:!0,id:d.inputId,tabIndex:d.tabIndex,disabled:d.disabled,onClick:ie,onKeyDown:ue},t))}return null}();return e.createElement(e.Fragment,null,e.createElement("div",h({ref:y,id:d.id,style:d.style,className:ke},Ee),Me,e.createElement(x,{ref:E,appendTo:d.appendTo,inline:d.inline,disabled:d.disabled,panelStyle:d.panelStyle,panelClassName:d.panelClassName,onClick:function(e){d.inline||i.emit("overlay-click",{originalEvent:e,target:y.current})},in:d.inline||b,onEnter:function(){p.set("overlay",E.current,n.autoZIndex,n.zIndex.overlay),ve()},onEntered:function(){P(),d.onShow&&d.onShow()},onExit:function(){j()},onExited:function(){p.clear(E.current),d.onHide&&d.onHide()},transitionOptions:d.transitionOptions},xe)),ye&&e.createElement(c,h({target:y,content:d.tooltip},d.tooltipOptions)))})));M.displayName="ColorPicker",M.defaultProps={__TYPE:"ColorPicker",appendTo:null,className:null,defaultColor:"ff0000",disabled:!1,format:"hex",id:null,inline:!1,inputId:null,inputRef:null,onChange:null,onHide:null,onShow:null,panelClassName:null,panelStyle:null,style:null,tabIndex:null,tooltip:null,tooltipOptions:null,transitionOptions:null,value:null};export{M as ColorPicker};