npm - @chayns-components/color-picker - Versions diffs - 5.0.0-beta.999 → 5.0.1 - Mend

@chayns-components/color-picker 5.0.0-beta.999 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/lib/esm/components/color-picker-popup/ColorPickerPopup.js CHANGED Viewed

@@ -4,25 +4,25 @@ import { StyledColorPickerPopup } from './ColorPickerPopup.styles';
 import MoreOptions from './more-options/MoreOptions';
 import PresetColors from './preset-colors/PresetColors';
 import Sliders from './sliders/Sliders';
-const ColorPickerPopup = _ref => {
-  let {
-    presetColors,
-    onPresetColorRemove,
-    onPresetColorAdd,
-    shouldShowPresetColors,
-    shouldShowTransparencySlider,
-    shouldUseSiteColors,
-    shouldShowMoreOptions
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledColorPickerPopup, null, /*#__PURE__*/React.createElement(ColorArea, null), /*#__PURE__*/React.createElement(Sliders, {
-    shouldShowTransparencySlider: shouldShowTransparencySlider
-  }), shouldShowPresetColors && /*#__PURE__*/React.createElement(PresetColors, {
-    presetColors: presetColors,
-    shouldUseSiteColors: shouldUseSiteColors,
-    onPresetColorAdd: onPresetColorAdd,
-    onPresetColorRemove: onPresetColorRemove
-  }), shouldShowMoreOptions && /*#__PURE__*/React.createElement(MoreOptions, null));
-};
+const ColorPickerPopup = ({
+  presetColors,
+  onPresetColorRemove,
+  onPresetColorAdd,
+  shouldShowPresetColors,
+  shouldShowTransparencySlider,
+  shouldHideDefaultPresetColors,
+  shouldUseSiteColors,
+  shouldShowMoreOptions,
+  shouldHideColorArea
+}) => /*#__PURE__*/React.createElement(StyledColorPickerPopup, null, !shouldHideColorArea && /*#__PURE__*/React.createElement(ColorArea, null), !shouldHideColorArea && /*#__PURE__*/React.createElement(Sliders, {
+  shouldShowTransparencySlider: shouldShowTransparencySlider
+}), shouldShowPresetColors && /*#__PURE__*/React.createElement(PresetColors, {
+  shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
+  presetColors: presetColors,
+  shouldUseSiteColors: shouldUseSiteColors,
+  onPresetColorAdd: onPresetColorAdd,
+  onPresetColorRemove: onPresetColorRemove
+}), shouldShowMoreOptions && /*#__PURE__*/React.createElement(MoreOptions, null));
 ColorPickerPopup.displayName = 'ColorPickerPopup';
 export default ColorPickerPopup;
 //# sourceMappingURL=ColorPickerPopup.js.map

package/lib/esm/components/color-picker-popup/ColorPickerPopup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerPopup.js","names":["React","ColorArea","StyledColorPickerPopup","MoreOptions","PresetColors","Sliders","ColorPickerPopup","~~_ref","~~presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldUseSiteColors","shouldShowMoreOptions","createElement","displayName"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\n\ninterface ColorPickerPopupProps {\n presetColors?: IPresetColor[];\n shouldShowPresetColors: boolean;\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n shouldShowTransparencySlider: boolean;\n shouldShowMoreOptions: boolean;\n shouldUseSiteColors: boolean;\n}\n\nconst ColorPickerPopup = ({\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldShowPresetColors,\n shouldShowTransparencySlider,\n shouldUseSiteColors,\n shouldShowMoreOptions,\n}: ColorPickerPopupProps) => (\n <StyledColorPickerPopup>\n <ColorArea ~~/>\~~n <Sliders shouldShowTransparencySlider={shouldShowTransparencySlider} />\n {shouldShowPresetColors && (\n <PresetColors\n presetColors={presetColors}\n shouldUseSiteColors={shouldUseSiteColors}\n onPresetColorAdd={onPresetColorAdd}\n onPresetColorRemove={onPresetColorRemove}\n />\n )}\n {shouldShowMoreOptions && <MoreOptions />}\n </StyledColorPickerPopup>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;~~AAYvC~~,MAAMC,gBAAgB,~~GAAGC~~,~~IAAA~~;~~EAAA~~,~~IAAC;IACtBC,~~YAAY;~~IACZC~~,mBAAmB;~~IACnBC~~,gBAAgB;~~IAChBC~~,sBAAsB;~~IACtBC~~,4BAA4B;~~IAC5BC~~,mBAAmB;~~IACnBC~~;~~EACmB~~,CAAC,~~GAAAP~~,~~IAAA;EAAA,oBACpBP,~~KAAA,~~CAAAe~~,aAAA,~~CAACb~~,sBAAsB,~~qBACnBF~~,KAAA,~~CAAAe~~,aAAA,~~CAACd~~,SAAS,MAAE,CAAC,~~eACbD~~,KAAA,~~CAAAe~~,aAAA,~~CAACV~~,OAAO;~~IAACO~~,4BAA4B,EAAEA;~~EAA6B~~,CAAE,~~CAAC~~,~~EACtED~~,sBAAsB,~~iBACnBX~~,KAAA,~~CAAAe~~,aAAA,~~CAACX~~,YAAY;~~IACTI~~,YAAY,EAAEA,YAAa;~~IAC3BK~~,mBAAmB,EAAEA,mBAAoB;~~IACzCH~~,gBAAgB,EAAEA,gBAAiB;~~IACnCD~~,mBAAmB,EAAEA;~~EAAoB~~,CAC5C,CACJ,~~EACAK~~,qBAAqB,iBAAId,KAAA,~~CAAAe~~,aAAA,~~CAACZ~~,WAAW,MAAE,CACpB,~~CAAC~~;~~AAAA,CAC5B;~~AAEDG,gBAAgB,~~CAACU~~,WAAW,GAAG,kBAAkB;AAEjD,~~eAAeV~~,gBAAgB","ignoreList":[]}
1	+ {"version":3,"file":"ColorPickerPopup.js","names":["React","ColorArea","StyledColorPickerPopup","MoreOptions","PresetColors","Sliders","ColorPickerPopup","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","createElement","displayName"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\n\ninterface ColorPickerPopupProps {\n presetColors?: IPresetColor[];\n shouldShowPresetColors: boolean;\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n shouldShowTransparencySlider: boolean;\n shouldShowMoreOptions: boolean;\n shouldUseSiteColors: boolean;\n shouldHideColorArea: boolean;\n shouldHideDefaultPresetColors: boolean;\n}\n\nconst ColorPickerPopup = ({\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldShowPresetColors,\n shouldShowTransparencySlider,\n shouldHideDefaultPresetColors,\n shouldUseSiteColors,\n shouldShowMoreOptions,\n shouldHideColorArea,\n}: ColorPickerPopupProps) => (\n <StyledColorPickerPopup>\n {!shouldHideColorArea && <ColorArea />}\n {!shouldHideColorArea && (\n <Sliders shouldShowTransparencySlider={shouldShowTransparencySlider} />\n )}\n {shouldShowPresetColors && (\n <PresetColors\n shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n presetColors={presetColors}\n shouldUseSiteColors={shouldUseSiteColors}\n onPresetColorAdd={onPresetColorAdd}\n onPresetColorRemove={onPresetColorRemove}\n />\n )}\n {shouldShowMoreOptions && <MoreOptions />}\n </StyledColorPickerPopup>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;AAcvC,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,6BAA6B;EAC7BC,mBAAmB;EACnBC,qBAAqB;EACrBC;AACmB,CAAC,kBACpBf,KAAA,CAAAgB,aAAA,CAACd,sBAAsB,QAClB,CAACa,mBAAmB,iBAAIf,KAAA,CAAAgB,aAAA,CAACf,SAAS,MAAE,CAAC,EACrC,CAACc,mBAAmB,iBACjBf,KAAA,CAAAgB,aAAA,CAACX,OAAO;EAACM,4BAA4B,EAAEA;AAA6B,CAAE,CACzE,EACAD,sBAAsB,iBACnBV,KAAA,CAAAgB,aAAA,CAACZ,YAAY;EACTQ,6BAA6B,EAAEA,6BAA8B;EAC7DL,YAAY,EAAEA,YAAa;EAC3BM,mBAAmB,EAAEA,mBAAoB;EACzCJ,gBAAgB,EAAEA,gBAAiB;EACnCD,mBAAmB,EAAEA;AAAoB,CAC5C,CACJ,EACAM,qBAAqB,iBAAId,KAAA,CAAAgB,aAAA,CAACb,WAAW,MAAE,CACpB,CAC3B;AAEDG,gBAAgB,CAACW,WAAW,GAAG,kBAAkB;AAEjD,eAAeX,gBAAgB","ignoreList":[]}

package/lib/esm/components/color-picker-popup/color-area/ColorArea.js CHANGED Viewed

@@ -2,9 +2,10 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import { StyledColorArea, StyledColorAreaCanvas, StyledColorAreaPseudo, StyledMotionColorAreaPointer } from './ColorArea.styles';
 import { hsvToHex } from '@chayns/colors';
 import { setRefreshScrollEnabled } from 'chayns-api';
-import { useDragControls, useMotionValue } from 'framer-motion';
+import { useDragControls, useMotionValue } from 'motion/react';
 import { extractRgbValues, getColorFromCoordinates, getCoordinatesFromColor, rgbToHsv } from '../../../utils/color';
 import { ColorPickerContext } from '../../ColorPickerProvider';
+import { useIsMeasuredClone } from '@chayns-components/core';
 const ColorArea = () => {
   const {
     selectedColor,
@@ -27,6 +28,7 @@ const ColorArea = () => {
   const canDrag = useRef(false);
   const canvasRef = useRef(null);
   const pseudoRef = useRef(null);
+  const [shouldPreventListener, ref] = useIsMeasuredClone();
   const dragControls = useDragControls();
   const x = useMotionValue(0);
   const y = useMotionValue(0);
@@ -173,6 +175,9 @@ const ColorArea = () => {
     setColor();
   }, [setColor, x, y]);
   const handleMouseMove = useCallback(event => {
+    if (shouldPreventListener) {
+      return;
+    }
     if (canDrag.current && pseudoRef.current) {
       const {
         left,
@@ -182,7 +187,7 @@ const ColorArea = () => {
       const yCords = event.clientY - top - 10;
       move(xCords, yCords);
     }
-  }, [move]);
+  }, [move, shouldPreventListener]);
   const handleTouchMove = useCallback(event => {
     if (canDrag.current && pseudoRef.current) {
       event.preventDefault();
@@ -204,6 +209,9 @@ const ColorArea = () => {
     window.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('touchmove', handleTouchMove);
     const endTouching = () => {
+      if (shouldPreventListener) {
+        return;
+      }
       handlePointerUp();
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('touchmove', handleTouchMove);
@@ -212,8 +220,10 @@ const ColorArea = () => {
     };
     window.addEventListener('pointerup', endTouching);
     window.addEventListener('touchend', endTouching);
-  }, [handleMouseMove, handlePointerUp, handleTouchMove, updateShouldGetCoordinates]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledColorArea, null, /*#__PURE__*/React.createElement(StyledColorAreaCanvas, {
+  }, [handleMouseMove, handlePointerUp, handleTouchMove, shouldPreventListener, updateShouldGetCoordinates]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledColorArea, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(StyledColorAreaCanvas, {
     ref: canvasRef
   }), /*#__PURE__*/React.createElement(StyledColorAreaPseudo, {
     ref: pseudoRef,
@@ -230,7 +240,7 @@ const ColorArea = () => {
     dragMomentum: false,
     dragControls: dragControls,
     onDrag: handleDrag
-  }))), [dragControls, handleClick, handleDrag, handleStartDrag, x, y]);
+  }))), [dragControls, handleClick, handleDrag, handleStartDrag, ref, x, y]);
 };
 ColorArea.displayName = 'ColorArea';
 export default ColorArea;

package/lib/esm/components/color-picker-popup/color-area/ColorArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorArea.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","StyledColorArea","StyledColorAreaCanvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer","hsvToHex","setRefreshScrollEnabled","useDragControls","useMotionValue","extractRgbValues","getColorFromCoordinates","getCoordinatesFromColor","rgbToHsv","ColorPickerContext","ColorArea","selectedColor","updateSelectedColor","updateIsPresetColor","isPresetColor","shouldGetCoordinates","canGetColorFromArea","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","opacity","setOpacity","scale","setScale","scaleX","scaleY","isPresetColorRef","shouldGetCoordinatesRef","canDrag","canvasRef","pseudoRef","dragControls","x","y","current","a","canvas","rect","getBoundingClientRect","width","height","setColor","xCord","get","yCord","color","coordinates","ctx","getContext","hsv","hex","h","s","v","colorGradiant","createLinearGradient","addColorStop","fillStyle","fillRect","transparentGradiant","cords","tolerance","set","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","move","xCords","yCords","newXCords","newYCords","handleMouseMove","handleTouchMove","preventDefault","changedTouches","pageX","pageY","handleStartDrag","window","addEventListener","endTouching","removeEventListener","createElement","ref","onPointerDown","onClick","drag","dragConstraints","style","dragElastic","dragMomentum","onDrag","displayName"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n StyledColorArea,\n StyledColorAreaCanvas,\n StyledColorAreaPseudo,\n StyledMotionColorAreaPointer,\n} from './ColorArea.styles';\n\nimport { hsvToHex } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport { useDragControls, useMotionValue } from 'framer-motion';\nimport type { Scale } from '../../../types/colorPicker';\nimport {\n extractRgbValues,\n getColorFromCoordinates,\n getCoordinatesFromColor,\n rgbToHsv,\n} from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\n\nconst ColorArea = () => {\n const {\n selectedColor,\n updateSelectedColor,\n updateIsPresetColor,\n isPresetColor,\n shouldGetCoordinates,\n canGetColorFromArea,\n updateShouldGetCoordinates,\n updateShouldCallOnSelect,\n hueColor,\n } = useContext(ColorPickerContext);\n\n const [opacity, setOpacity] = useState<number>(1);\n const [scale, setScale] = useState<Scale>({ scaleX: 0, scaleY: 0 });\n\n const isPresetColorRef = useRef(false);\n const shouldGetCoordinatesRef = useRef(false);\n const canDrag = useRef(false);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const pseudoRef = useRef<HTMLDivElement>(null);\n\n const dragControls = useDragControls();\n\n const x = useMotionValue(0);\n const y = useMotionValue(0);\n\n useEffect(() => {\n isPresetColorRef.current = isPresetColor ?? false;\n }, [isPresetColor]);\n\n useEffect(() => {\n shouldGetCoordinatesRef.current = shouldGetCoordinates ?? true;\n }, [shouldGetCoordinates]);\n\n useEffect(() => {\n if (selectedColor) {\n const { a } = extractRgbValues(selectedColor);\n\n setOpacity(a);\n }\n }, [selectedColor]);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n\n if (!canvas) {\n return;\n }\n\n const rect = canvas.getBoundingClientRect();\n\n const scaleX = canvas.width / rect.width;\n const scaleY = canvas.height / rect.height;\n\n setScale({ scaleX, scaleY });\n }, []);\n\n const setColor = useCallback(() => {\n const xCord = x.get();\n const yCord = y.get();\n\n if (typeof updateSelectedColor === 'function') {\n const color = getColorFromCoordinates({\n coordinates: {\n x: xCord,\n y: yCord,\n },\n canvas: canvasRef,\n opacity,\n scale,\n });\n\n if (color === 'transparent') {\n return;\n }\n\n updateSelectedColor(color);\n }\n }, [opacity, scale, updateSelectedColor, x, y]);\n\n useEffect(() => {\n const ctx = canvasRef.current?.getContext('2d');\n\n if (!ctx) {\n return;\n }\n\n const hsv = rgbToHsv(hueColor);\n\n const hex = hsvToHex({ h: hsv?.h ?? 1, s: 1, v: 1 });\n\n const colorGradiant = ctx.createLinearGradient(0, 0, 300, 0);\n colorGradiant.addColorStop(0, '#fff');\n colorGradiant.addColorStop(1, hex ?? 'red');\n\n ctx.fillStyle = colorGradiant;\n ctx.fillRect(0, 0, 300, 150);\n\n const transparentGradiant = ctx.createLinearGradient(0, 0, 0, 150);\n\n transparentGradiant.addColorStop(0, 'transparent');\n transparentGradiant.addColorStop(1, '#000');\n\n ctx.fillStyle = transparentGradiant;\n ctx.fillRect(0, 0, 300, 150);\n\n if (isPresetColorRef.current) {\n if (typeof updateIsPresetColor === 'function') {\n updateIsPresetColor(false);\n }\n\n return;\n }\n\n if (canGetColorFromArea) {\n setColor();\n }\n }, [canGetColorFromArea, hueColor, setColor, updateIsPresetColor]);\n\n useEffect(() => {\n if (selectedColor && shouldGetCoordinatesRef.current) {\n const cords = getCoordinatesFromColor({\n color: selectedColor,\n canvas: canvasRef,\n tolerance: 10,\n });\n\n if (cords) {\n x.set(cords.x);\n y.set(cords.y);\n }\n }\n }, [selectedColor, x, y]);\n\n const handleDrag = useCallback(() => {\n setColor();\n }, [setColor]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (typeof updateShouldGetCoordinates === 'function') {\n updateShouldGetCoordinates(false);\n }\n\n const { left, top } = (event.target as HTMLDivElement).getBoundingClientRect();\n\n x.set(event.clientX - left - 10);\n y.set(event.clientY - top - 10);\n\n setColor();\n },\n [setColor, updateShouldGetCoordinates, x, y],\n );\n\n const handlePointerUp = useCallback(() => {\n canDrag.current = false;\n\n void setRefreshScrollEnabled(true);\n\n if (typeof updateShouldGetCoordinates === 'function') {\n updateShouldGetCoordinates(true);\n }\n\n if (typeof updateShouldCallOnSelect === 'function') {\n updateShouldCallOnSelect(true);\n }\n }, [updateShouldCallOnSelect, updateShouldGetCoordinates]);\n\n const move = useCallback(\n (xCords: number, yCords: number) => {\n let newXCords = xCords;\n let newYCords = yCords;\n\n switch (true) {\n case xCords > 300:\n newXCords = 300;\n break;\n case xCords < 0:\n newXCords = 0;\n break;\n default:\n break;\n }\n\n switch (true) {\n case yCords > 150:\n newYCords = 150;\n break;\n case yCords < 0:\n newYCords = 0;\n break;\n default:\n break;\n }\n\n x.set(newXCords);\n y.set(newYCords);\n\n setColor();\n },\n [setColor, x, y],\n );\n\n const handleMouseMove = useCallback(\n (event: MouseEvent) => {\n if (canDrag.current && pseudoRef.current) {\n const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n const xCords = event.clientX - left - 10;\n const yCords = event.clientY - top - 10;\n\n move(xCords, yCords);\n }\n },\n [move],\n );\n\n const handleTouchMove = useCallback(\n (event: TouchEvent) => {\n if (canDrag.current && pseudoRef.current) {\n event.preventDefault();\n\n void setRefreshScrollEnabled(false);\n\n const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n const xCords = event.changedTouches[0]\n ? event.changedTouches[0].clientX - left - 10\n : (event as unknown as { pageX: number }).pageX;\n const yCords = event.changedTouches[0]\n ? event.changedTouches[0].clientY - top - 10\n : (event as unknown as { pageY: number }).pageY;\n\n move(xCords, yCords);\n }\n },\n [move],\n );\n\n const handleStartDrag = useCallback(() => {\n if (typeof updateShouldGetCoordinates === 'function') {\n updateShouldGetCoordinates(false);\n }\n\n canDrag.current = true;\n\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('touchmove', handleTouchMove);\n\n const endTouching = () => {\n handlePointerUp();\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('touchmove', handleTouchMove);\n window.removeEventListener('pointerup', endTouching);\n window.removeEventListener('touchend', endTouching);\n };\n\n window.addEventListener('pointerup', endTouching);\n window.addEventListener('touchend', endTouching);\n }, [handleMouseMove, handlePointerUp, handleTouchMove, updateShouldGetCoordinates]);\n\n return useMemo(\n () => (\n <StyledColorArea>\n <StyledColorAreaCanvas ref={canvasRef} />\n <StyledColorAreaPseudo\n ref={pseudoRef}\n onPointerDown={handleStartDrag}\n onClick={handleClick}\n >\n <StyledMotionColorAreaPointer\n drag\n dragConstraints={pseudoRef}\n style={{ x, y }}\n dragElastic={false}\n dragMomentum={false}\n dragControls={dragControls}\n onDrag={handleDrag}\n />\n </StyledColorAreaPseudo>\n </StyledColorArea>\n ),\n [dragControls, handleClick, handleDrag, handleStartDrag, x, y],\n );\n};\n\nColorArea.displayName = 'ColorArea';\n\nexport default ColorArea;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ColorArea.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","StyledColorArea","StyledColorAreaCanvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer","hsvToHex","setRefreshScrollEnabled","useDragControls","useMotionValue","extractRgbValues","getColorFromCoordinates","getCoordinatesFromColor","rgbToHsv","ColorPickerContext","useIsMeasuredClone","ColorArea","selectedColor","updateSelectedColor","updateIsPresetColor","isPresetColor","shouldGetCoordinates","canGetColorFromArea","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","opacity","setOpacity","scale","setScale","scaleX","scaleY","isPresetColorRef","shouldGetCoordinatesRef","canDrag","canvasRef","pseudoRef","shouldPreventListener","ref","dragControls","x","y","current","a","canvas","rect","getBoundingClientRect","width","height","setColor","xCord","get","yCord","color","coordinates","ctx","getContext","hsv","hex","h","s","v","colorGradiant","createLinearGradient","addColorStop","fillStyle","fillRect","transparentGradiant","cords","tolerance","set","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","move","xCords","yCords","newXCords","newYCords","handleMouseMove","handleTouchMove","preventDefault","changedTouches","pageX","pageY","handleStartDrag","window","addEventListener","endTouching","removeEventListener","createElement","onPointerDown","onClick","drag","dragConstraints","style","dragElastic","dragMomentum","onDrag","displayName"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n StyledColorArea,\n StyledColorAreaCanvas,\n StyledColorAreaPseudo,\n StyledMotionColorAreaPointer,\n} from './ColorArea.styles';\n\nimport { hsvToHex } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport { useDragControls, useMotionValue } from 'motion/react';\nimport type { Scale } from '../../../types/colorPicker';\nimport {\n extractRgbValues,\n getColorFromCoordinates,\n getCoordinatesFromColor,\n rgbToHsv,\n} from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport { useIsMeasuredClone } from '@chayns-components/core';\n\nconst ColorArea = () => {\n const {\n selectedColor,\n updateSelectedColor,\n updateIsPresetColor,\n isPresetColor,\n shouldGetCoordinates,\n canGetColorFromArea,\n updateShouldGetCoordinates,\n updateShouldCallOnSelect,\n hueColor,\n } = useContext(ColorPickerContext);\n\n const [opacity, setOpacity] = useState<number>(1);\n const [scale, setScale] = useState<Scale>({ scaleX: 0, scaleY: 0 });\n\n const isPresetColorRef = useRef(false);\n const shouldGetCoordinatesRef = useRef(false);\n const canDrag = useRef(false);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const pseudoRef = useRef<HTMLDivElement>(null);\n\n const [shouldPreventListener, ref] = useIsMeasuredClone<HTMLDivElement>();\n\n const dragControls = useDragControls();\n\n const x = useMotionValue(0);\n const y = useMotionValue(0);\n\n useEffect(() => {\n isPresetColorRef.current = isPresetColor ?? false;\n }, [isPresetColor]);\n\n useEffect(() => {\n shouldGetCoordinatesRef.current = shouldGetCoordinates ?? true;\n }, [shouldGetCoordinates]);\n\n useEffect(() => {\n if (selectedColor) {\n const { a } = extractRgbValues(selectedColor);\n\n setOpacity(a);\n }\n }, [selectedColor]);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n\n if (!canvas) {\n return;\n }\n\n const rect = canvas.getBoundingClientRect();\n\n const scaleX = canvas.width / rect.width;\n const scaleY = canvas.height / rect.height;\n\n setScale({ scaleX, scaleY });\n }, []);\n\n const setColor = useCallback(() => {\n const xCord = x.get();\n const yCord = y.get();\n\n if (typeof updateSelectedColor === 'function') {\n const color = getColorFromCoordinates({\n coordinates: {\n x: xCord,\n y: yCord,\n },\n canvas: canvasRef,\n opacity,\n scale,\n });\n\n if (color === 'transparent') {\n return;\n }\n\n updateSelectedColor(color);\n }\n }, [opacity, scale, updateSelectedColor, x, y]);\n\n useEffect(() => {\n const ctx = canvasRef.current?.getContext('2d');\n\n if (!ctx) {\n return;\n }\n\n const hsv = rgbToHsv(hueColor);\n\n const hex = hsvToHex({ h: hsv?.h ?? 1, s: 1, v: 1 });\n\n const colorGradiant = ctx.createLinearGradient(0, 0, 300, 0);\n colorGradiant.addColorStop(0, '#fff');\n colorGradiant.addColorStop(1, hex ?? 'red');\n\n ctx.fillStyle = colorGradiant;\n ctx.fillRect(0, 0, 300, 150);\n\n const transparentGradiant = ctx.createLinearGradient(0, 0, 0, 150);\n\n transparentGradiant.addColorStop(0, 'transparent');\n transparentGradiant.addColorStop(1, '#000');\n\n ctx.fillStyle = transparentGradiant;\n ctx.fillRect(0, 0, 300, 150);\n\n if (isPresetColorRef.current) {\n if (typeof updateIsPresetColor === 'function') {\n updateIsPresetColor(false);\n }\n\n return;\n }\n\n if (canGetColorFromArea) {\n setColor();\n }\n }, [canGetColorFromArea, hueColor, setColor, updateIsPresetColor]);\n\n useEffect(() => {\n if (selectedColor && shouldGetCoordinatesRef.current) {\n const cords = getCoordinatesFromColor({\n color: selectedColor,\n canvas: canvasRef,\n tolerance: 10,\n });\n\n if (cords) {\n x.set(cords.x);\n y.set(cords.y);\n }\n }\n }, [selectedColor, x, y]);\n\n const handleDrag = useCallback(() => {\n setColor();\n }, [setColor]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (typeof updateShouldGetCoordinates === 'function') {\n updateShouldGetCoordinates(false);\n }\n\n const { left, top } = (event.target as HTMLDivElement).getBoundingClientRect();\n\n x.set(event.clientX - left - 10);\n y.set(event.clientY - top - 10);\n\n setColor();\n },\n [setColor, updateShouldGetCoordinates, x, y],\n );\n\n const handlePointerUp = useCallback(() => {\n canDrag.current = false;\n\n void setRefreshScrollEnabled(true);\n\n if (typeof updateShouldGetCoordinates === 'function') {\n updateShouldGetCoordinates(true);\n }\n\n if (typeof updateShouldCallOnSelect === 'function') {\n updateShouldCallOnSelect(true);\n }\n }, [updateShouldCallOnSelect, updateShouldGetCoordinates]);\n\n const move = useCallback(\n (xCords: number, yCords: number) => {\n let newXCords = xCords;\n let newYCords = yCords;\n\n switch (true) {\n case xCords > 300:\n newXCords = 300;\n break;\n case xCords < 0:\n newXCords = 0;\n break;\n default:\n break;\n }\n\n switch (true) {\n case yCords > 150:\n newYCords = 150;\n break;\n case yCords < 0:\n newYCords = 0;\n break;\n default:\n break;\n }\n\n x.set(newXCords);\n y.set(newYCords);\n\n setColor();\n },\n [setColor, x, y],\n );\n\n const handleMouseMove = useCallback(\n (event: MouseEvent) => {\n if (shouldPreventListener) {\n return;\n }\n\n if (canDrag.current && pseudoRef.current) {\n const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n const xCords = event.clientX - left - 10;\n const yCords = event.clientY - top - 10;\n\n move(xCords, yCords);\n }\n },\n [move, shouldPreventListener],\n );\n\n const handleTouchMove = useCallback(\n (event: TouchEvent) => {\n if (canDrag.current && pseudoRef.current) {\n event.preventDefault();\n\n void setRefreshScrollEnabled(false);\n\n const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n const xCords = event.changedTouches[0]\n ? event.changedTouches[0].clientX - left - 10\n : (event as unknown as { pageX: number }).pageX;\n const yCords = event.changedTouches[0]\n ? event.changedTouches[0].clientY - top - 10\n : (event as unknown as { pageY: number }).pageY;\n\n move(xCords, yCords);\n }\n },\n [move],\n );\n\n const handleStartDrag = useCallback(() => {\n if (typeof updateShouldGetCoordinates === 'function') {\n updateShouldGetCoordinates(false);\n }\n\n canDrag.current = true;\n\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('touchmove', handleTouchMove);\n\n const endTouching = () => {\n if (shouldPreventListener) {\n return;\n }\n\n handlePointerUp();\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('touchmove', handleTouchMove);\n window.removeEventListener('pointerup', endTouching);\n window.removeEventListener('touchend', endTouching);\n };\n\n window.addEventListener('pointerup', endTouching);\n window.addEventListener('touchend', endTouching);\n }, [\n handleMouseMove,\n handlePointerUp,\n handleTouchMove,\n shouldPreventListener,\n updateShouldGetCoordinates,\n ]);\n\n return useMemo(\n () => (\n <StyledColorArea ref={ref}>\n <StyledColorAreaCanvas ref={canvasRef} />\n <StyledColorAreaPseudo\n ref={pseudoRef}\n onPointerDown={handleStartDrag}\n onClick={handleClick}\n >\n <StyledMotionColorAreaPointer\n drag\n dragConstraints={pseudoRef}\n style={{ x, y }}\n dragElastic={false}\n dragMomentum={false}\n dragControls={dragControls}\n onDrag={handleDrag}\n />\n </StyledColorAreaPseudo>\n </StyledColorArea>\n ),\n [dragControls, handleClick, handleDrag, handleStartDrag, ref, x, y],\n );\n};\n\nColorArea.displayName = 'ColorArea';\n\nexport default ColorArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-picker-popup/color-area/ColorArea.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled from 'styled-components';
 export const StyledColorArea = styled.div`
     height: 150px;

package/lib/esm/components/color-picker-popup/color-area/ColorArea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorArea.styles.js","names":["motion","styled","StyledColorArea","div","StyledColorAreaCanvas","canvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.styles.ts"],"sourcesContent":["import { motion } from '~~framer-~~motion';\nimport styled from 'styled-components';\n\nexport const StyledColorArea = styled.div`\n height: 150px;\n width: 300px;\n position: relative;\n user-select: none;\n overflow: hidden;\n cursor: crosshair;\n`;\n\nexport const StyledColorAreaCanvas = styled.canvas`\n user-select: none;\n`;\n\nexport const StyledColorAreaPseudo = styled.div`\n position: absolute;\n top: -10px;\n left: -10px;\n touch-action: none;\n user-select: none;\n\n height: 170px;\n width: 320px;\n`;\n\nexport const StyledMotionColorAreaPointer = styled(motion.div)`\n position: absolute;\n border-radius: 100%;\n border: 2px solid white;\n width: 20px;\n height: 20px;\n box-shadow:\n 0 0 5px 0 rgba(0, 0, 0, 0.5),\n 0 0 3px 0 rgba(0, 0, 0, 0.5) inset;\n pointer-events: none;\n user-select: none;\n top: 0;\n left: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,~~eAAe~~;~~AACtC~~,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACI,MAAM;AAClD;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGL,MAAM,CAACE,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,4BAA4B,GAAGN,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ColorArea.styles.js","names":["motion","styled","StyledColorArea","div","StyledColorAreaCanvas","canvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledColorArea = styled.div`\n height: 150px;\n width: 300px;\n position: relative;\n user-select: none;\n overflow: hidden;\n cursor: crosshair;\n`;\n\nexport const StyledColorAreaCanvas = styled.canvas`\n user-select: none;\n`;\n\nexport const StyledColorAreaPseudo = styled.div`\n position: absolute;\n top: -10px;\n left: -10px;\n touch-action: none;\n user-select: none;\n\n height: 170px;\n width: 320px;\n`;\n\nexport const StyledMotionColorAreaPointer = styled(motion.div)`\n position: absolute;\n border-radius: 100%;\n border: 2px solid white;\n width: 20px;\n height: 20px;\n box-shadow:\n 0 0 5px 0 rgba(0, 0, 0, 0.5),\n 0 0 3px 0 rgba(0, 0, 0, 0.5) inset;\n pointer-events: none;\n user-select: none;\n top: 0;\n left: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACI,MAAM;AAClD;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGL,MAAM,CAACE,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,4BAA4B,GAAGN,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/color-picker-popup/more-options/MoreOptions.styles.js CHANGED Viewed

@@ -10,27 +10,18 @@ export const StyledMoreOptionsInput = styled.input`
     width: 100%;
     border-radius: 3px;
     border: 1px solid
-        ${_ref => {
-  let {
-    theme,
-    $isInvalid
-  } = _ref;
-  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
-}};
-    background-color: ${_ref2 => {
-  let {
-    theme,
-    $shouldChangeColor
-  } = _ref2;
-  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
-}};
-    color: ${_ref3 => {
-  let {
-    theme,
-    $isInvalid
-  } = _ref3;
-  return $isInvalid ? theme.wrong : theme.text;
-}};
+        ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};
+    background-color: ${({
+  theme,
+  $shouldChangeColor
+}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : theme.text};
     padding: 8px 10px;
     font-size: 11px;
 `;

package/lib/esm/components/color-picker-popup/more-options/MoreOptions.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MoreOptions.styles.js","names":["styled","StyledMoreOptions","div","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","input","~~_ref","~~theme","$isInvalid","wrong","~~_ref2","~~$shouldChangeColor","colorMode","~~_ref3","~~text"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledMoreOptions = styled.div``;\nexport const StyledMoreOptionsInputWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 8px;\n align-items: center;\n`;\n\ntype StyledMoreOptionsInputProps = WithTheme<{ $isInvalid: boolean; $shouldChangeColor: boolean }>;\n\nexport const StyledMoreOptionsInput = styled.input<StyledMoreOptionsInputProps>`\n width: 100%;\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid }: StyledMoreOptionsInputProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n background-color: ${({ theme, $shouldChangeColor }: StyledMoreOptionsInputProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme, $isInvalid }: StyledMoreOptionsInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 8px 10px;\n font-size: 11px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAG,EAAE;AAC7C,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAG;AACvD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,sBAAsB,GAAGJ,MAAM,CAACK,KAAkC;AAC/E;AACA;AACA;AACA,~~UAAUC~~,~~IAAA~~;~~EAAA~~,~~IAAC;IAAEC,~~KAAK;~~IAAEC~~;~~EAAwC~~,CAAC,~~GAAAF~~,~~IAAA;EAAA,OACjDE,~~UAAU,GAAGD,KAAK,CAACE,KAAK,GAAG,0BAA0B;~~AAAA;~~AACjE,~~wBAAwBC~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAEH,~~KAAK;~~IAAEI~~;~~EAAgD~~,CAAC,~~GAAAD~~,~~KAAA;EAAA,OAC3EH,~~KAAK,~~CAACK~~,SAAS,KAAK,SAAS,IAAID,kBAAkB,~~GAAGJ~~,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;~~AAAA;~~AACzF,~~aAAaM~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAEN,~~KAAK;~~IAAEC~~;~~EAAwC~~,CAAC,~~GAAAK~~,~~KAAA;EAAA,OACxDL,~~UAAU,GAAGD,KAAK,CAACE,KAAK,GAAGF,KAAK,~~CAACO~~,IAAI;~~AAAA;~~AAC7C;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"MoreOptions.styles.js","names":["styled","StyledMoreOptions","div","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","input","theme","$isInvalid","wrong","$shouldChangeColor","colorMode","text"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledMoreOptions = styled.div``;\nexport const StyledMoreOptionsInputWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 8px;\n align-items: center;\n`;\n\ntype StyledMoreOptionsInputProps = WithTheme<{ $isInvalid: boolean; $shouldChangeColor: boolean }>;\n\nexport const StyledMoreOptionsInput = styled.input<StyledMoreOptionsInputProps>`\n width: 100%;\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid }: StyledMoreOptionsInputProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n background-color: ${({ theme, $shouldChangeColor }: StyledMoreOptionsInputProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme, $isInvalid }: StyledMoreOptionsInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 8px 10px;\n font-size: 11px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAG,EAAE;AAC7C,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAG;AACvD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,sBAAsB,GAAGJ,MAAM,CAACK,KAAkC;AAC/E;AACA;AACA;AACA,UAAU,CAAC;EAAEC,KAAK;EAAEC;AAAwC,CAAC,KACjDA,UAAU,GAAGD,KAAK,CAACE,KAAK,GAAG,0BAA0B;AACjE,wBAAwB,CAAC;EAAEF,KAAK;EAAEG;AAAgD,CAAC,KAC3EH,KAAK,CAACI,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGH,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF,aAAa,CAAC;EAAEA,KAAK;EAAEC;AAAwC,CAAC,KACxDA,UAAU,GAAGD,KAAK,CAACE,KAAK,GAAGF,KAAK,CAACK,IAAI;AAC7C;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/color-picker-popup/preset-colors/PresetColors.js CHANGED Viewed

@@ -8,13 +8,13 @@ import { ColorPickerContext } from '../../ColorPickerProvider';
 import PresetButton from './preset-button/PresetButton';
 import PresetColor from './preset-color/PresetColor';
 import { StyledPresetColors } from './PresetColors.styles';
-const PresetColors = _ref => {
-  let {
-    presetColors,
-    onPresetColorRemove,
-    onPresetColorAdd,
-    shouldUseSiteColors
-  } = _ref;
+const PresetColors = ({
+  presetColors,
+  onPresetColorRemove,
+  onPresetColorAdd,
+  shouldUseSiteColors,
+  shouldHideDefaultPresetColors
+}) => {
   const {
     selectedColor
   } = useContext(ColorPickerContext);
@@ -39,25 +39,18 @@ const PresetColors = _ref => {
       if (!presetColorId) {
         return newColors;
       }
-      const deletedColor = prevColors?.find(_ref2 => {
-        let {
-          id
-        } = _ref2;
-        return id === presetColorId;
-      })?.color;
+      const deletedColor = prevColors?.find(({
+        id
+      }) => id === presetColorId)?.color;
       if (!deletedColor) {
         return newColors;
       }
-      const filteredColors = newColors?.filter(_ref3 => {
-        let {
-          color
-        } = _ref3;
-        return color !== deletedColor;
-      });
-      const formattedColors = filteredColors?.map(_ref4 => {
-        let {
-          color
-        } = _ref4;
+      const filteredColors = newColors?.filter(({
+        color
+      }) => color !== deletedColor);
+      const formattedColors = filteredColors?.map(({
+        color
+      }) => {
         const rgbValues = extractRgbValues(color);
         return rgbToHex(rgbValues);
       });
@@ -73,12 +66,11 @@ const PresetColors = _ref => {
     void loadSiteColors();
   }, [shouldUseSiteColors]);
   const combinedColors = useMemo(() => {
-    const tmp = (presetColors ?? []).map(_ref5 => {
-      let {
-        color,
-        isCustom,
-        id
-      } = _ref5;
+    const tmp = (presetColors ?? []).map(({
+      color,
+      isCustom,
+      id
+    }) => {
       let newColor = color;
       if (isHex(color)) {
         const {
@@ -95,15 +87,17 @@ const PresetColors = _ref => {
         color: newColor
       };
     });
+    if (shouldHideDefaultPresetColors) {
+      return tmp;
+    }
     return [...PRESETCOLORS, ...(siteColors ?? []), ...tmp];
-  }, [presetColors, siteColors]);
+  }, [presetColors, shouldHideDefaultPresetColors, siteColors]);
   const content = useMemo(() => {
     const items = [];
-    combinedColors.forEach(_ref6 => {
-      let {
-        color,
-        id
-      } = _ref6;
+    combinedColors.forEach(({
+      color,
+      id
+    }) => {
       items.push(/*#__PURE__*/React.createElement(PresetColor, {
         key: `preset-color__${id}`,
         color: color
@@ -111,22 +105,18 @@ const PresetColors = _ref => {
     });
     return items;
   }, [combinedColors]);
-  const currentPresetColor = useMemo(() => combinedColors.find(_ref7 => {
-    let {
-      color
-    } = _ref7;
-    return color === selectedColor;
-  }), [combinedColors, selectedColor]);
+  const currentPresetColor = useMemo(() => combinedColors.find(({
+    color
+  }) => color === selectedColor), [combinedColors, selectedColor]);
   const handleAddColor = presetColor => {
     if (typeof onPresetColorAdd === 'function') {
       onPresetColorAdd(presetColor);
     }
     setSiteColors(prevColors => {
       const colors = [...(prevColors ?? []), presetColor];
-      const newColors = colors?.map(_ref8 => {
-        let {
-          color
-        } = _ref8;
+      const newColors = colors?.map(({
+        color
+      }) => {
         const rgbValues = extractRgbValues(color);
         return rgbToHex(rgbValues);
       });
@@ -140,7 +130,7 @@ const PresetColors = _ref => {
       onPresetColorRemove(presetColorId);
     }
   };
-  return /*#__PURE__*/React.createElement(StyledPresetColors, null, content, /*#__PURE__*/React.createElement(PresetButton, {
+  return /*#__PURE__*/React.createElement(StyledPresetColors, null, content, !shouldHideDefaultPresetColors && /*#__PURE__*/React.createElement(PresetButton, {
     id: currentPresetColor?.id,
     isCustom: currentPresetColor?.isCustom,
     onAdd: handleAddColor,

package/lib/esm/components/color-picker-popup/preset-colors/PresetColors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetColors.js","names":["isHex","React","useContext","useEffect","useMemo","useState","putSiteColors","getSiteColors","PRESETCOLORS","extractRgbValues","hexToRgb","rgbToHex","ColorPickerContext","PresetButton","PresetColor","StyledPresetColors","PresetColors","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldUseSiteColors","selectedColor","siteColors","setSiteColors","undefined","loadSiteColors","presetColorId","colors","prevColors","newColors","value","map","color","r","g","b","a","newColor","id","Math","random","toString","isCustom","deletedColor","find","_ref2","filteredColors","filter","_ref3","formattedColors","_ref4","rgbValues","combinedColors","tmp","_ref5","content","items","forEach","_ref6","push","createElement","key","currentPresetColor","_ref7","handleAddColor","presetColor","_ref8","handleRemoveColor","onAdd","onRemove","displayName"],"sources":["../../../../../src/components/color-picker-popup/preset-colors/PresetColors.tsx"],"sourcesContent":["import { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ReactElement } from 'react';\n\nimport { putSiteColors } from '../../../api/color/get';\nimport { getSiteColors } from '../../../api/color/put';\nimport { PRESETCOLORS } from '../../../constants/color';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport { extractRgbValues, hexToRgb, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport PresetButton from './preset-button/PresetButton';\nimport PresetColor from './preset-color/PresetColor';\nimport { StyledPresetColors } from './PresetColors.styles';\n\ninterface PresetColorsProps {\n presetColors?: IPresetColor[];\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n shouldUseSiteColors: boolean;\n}\n\nconst PresetColors = ({\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldUseSiteColors,\n}: PresetColorsProps) => {\n const { selectedColor } = useContext(ColorPickerContext);\n\n const [siteColors, setSiteColors] = useState<IPresetColor[] \| undefined>(undefined);\n\n const loadSiteColors = async (presetColorId?: IPresetColor['id']) => {\n const colors = await getSiteColors();\n\n setSiteColors((prevColors) => {\n const newColors = colors.value.map((color) => {\n const { r, g, b, a } = hexToRgb(color);\n\n const newColor = `rgba(${r},${g},${b},${a})`;\n\n return {\n color: newColor,\n id: Math.random().toString(),\n isCustom: true,\n };\n });\n\n if (!presetColorId) {\n return newColors;\n }\n\n const deletedColor = prevColors?.find(({ id }) => id === presetColorId)?.color;\n\n if (!deletedColor) {\n return newColors;\n }\n\n const filteredColors = newColors?.filter(({ color }) => color !== deletedColor);\n\n const formattedColors = filteredColors?.map(({ color }) => {\n const rgbValues = extractRgbValues(color);\n\n return rgbToHex(rgbValues);\n });\n\n void putSiteColors(formattedColors ?? []);\n\n return filteredColors;\n });\n };\n\n useEffect(() => {\n if (!shouldUseSiteColors) {\n setSiteColors(undefined);\n\n return;\n }\n\n void loadSiteColors();\n }, [shouldUseSiteColors]);\n\n const combinedColors = useMemo(() => {\n const tmp = (presetColors ?? []).map(({ color, isCustom, id }) => {\n let newColor = color;\n\n if (isHex(color)) {\n const { r, g, b, a } = hexToRgb(color);\n\n newColor = `rgba(${r},${g},${b},${a})`;\n }\n\n return {\n id,\n isCustom,\n color: newColor,\n };\n });\n\n return [...PRESETCOLORS, ...(siteColors ?? []), ...tmp];\n }, [presetColors, siteColors]);\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n combinedColors.forEach(({ color, id }) => {\n items.push(<PresetColor key={`preset-color__${id}`} color={color} />);\n });\n\n return items;\n }, [combinedColors]);\n\n const currentPresetColor = useMemo(\n () => combinedColors.find(({ color }) => color === selectedColor),\n [combinedColors, selectedColor],\n );\n\n const handleAddColor = (presetColor: IPresetColor) => {\n if (typeof onPresetColorAdd === 'function') {\n onPresetColorAdd(presetColor);\n }\n\n setSiteColors((prevColors) => {\n const colors = [...(prevColors ?? []), presetColor];\n\n const newColors = colors?.map(({ color }) => {\n const rgbValues = extractRgbValues(color);\n\n return rgbToHex(rgbValues);\n });\n\n void putSiteColors(newColors);\n\n return colors;\n });\n };\n\n const handleRemoveColor = (presetColorId: IPresetColor['id']) => {\n void loadSiteColors(presetColorId);\n\n if (typeof onPresetColorRemove === 'function') {\n onPresetColorRemove(presetColorId);\n }\n };\n\n return (\n <StyledPresetColors>\n {content}\n <PresetButton\n id={currentPresetColor?.id}\n isCustom={currentPresetColor?.isCustom}\n onAdd={handleAddColor}\n onRemove={handleRemoveColor}\n />\n </StyledPresetColors>\n );\n};\n\nPresetColors.displayName = 'PresetColors';\n\nexport default PresetColors;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,gBAAgB;AACtC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAA2B,OAAO;AAE1F,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,YAAY,QAAQ,0BAA0B;AAEvD,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,sBAAsB;AAC3E,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAS1D,MAAMC,YAAY,GAAGC,IAAA,IAKI;EAAA,IALH;IAClBC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC;EACe,CAAC,GAAAJ,IAAA;EAChB,MAAM;IAAEK;EAAc,CAAC,GAAGpB,UAAU,CAACU,kBAAkB,CAAC;EAExD,MAAM,CAACW,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAA6BoB,SAAS,CAAC;EAEnF,MAAMC,cAAc,GAAG,MAAOC,aAAkC,IAAK;IACjE,MAAMC,MAAM,GAAG,MAAMrB,aAAa,CAAC,CAAC;IAEpCiB,aAAa,CAAEK,UAAU,IAAK;MAC1B,MAAMC,SAAS,GAAGF,MAAM,CAACG,KAAK,CAACC,GAAG,CAAEC,KAAK,IAAK;QAC1C,MAAM;UAAEC,CAAC;UAAEC,CAAC;UAAEC,CAAC;UAAEC;QAAE,CAAC,GAAG3B,QAAQ,CAACuB,KAAK,CAAC;QAEtC,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,IAAIC,CAAC,IAAIC,CAAC,IAAIC,CAAC,GAAG;QAE5C,OAAO;UACHJ,KAAK,EAAEK,QAAQ;UACfC,EAAE,EAAEC,IAAI,CAACC,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;UAC5BC,QAAQ,EAAE;QACd,CAAC;MACL,CAAC,CAAC;MAEF,IAAI,CAAChB,aAAa,EAAE;QAChB,OAAOG,SAAS;MACpB;MAEA,MAAMc,YAAY,GAAGf,UAAU,EAAEgB,IAAI,CAACC,KAAA;QAAA,IAAC;UAAEP;QAAG,CAAC,GAAAO,KAAA;QAAA,OAAKP,EAAE,KAAKZ,aAAa;MAAA,EAAC,EAAEM,KAAK;MAE9E,IAAI,CAACW,YAAY,EAAE;QACf,OAAOd,SAAS;MACpB;MAEA,MAAMiB,cAAc,GAAGjB,SAAS,EAAEkB,MAAM,CAACC,KAAA;QAAA,IAAC;UAAEhB;QAAM,CAAC,GAAAgB,KAAA;QAAA,OAAKhB,KAAK,KAAKW,YAAY;MAAA,EAAC;MAE/E,MAAMM,eAAe,GAAGH,cAAc,EAAEf,GAAG,CAACmB,KAAA,IAAe;QAAA,IAAd;UAAElB;QAAM,CAAC,GAAAkB,KAAA;QAClD,MAAMC,SAAS,GAAG3C,gBAAgB,CAACwB,KAAK,CAAC;QAEzC,OAAOtB,QAAQ,CAACyC,SAAS,CAAC;MAC9B,CAAC,CAAC;MAEF,KAAK9C,aAAa,CAAC4C,eAAe,IAAI,EAAE,CAAC;MAEzC,OAAOH,cAAc;IACzB,CAAC,CAAC;EACN,CAAC;EAED5C,SAAS,CAAC,MAAM;IACZ,IAAI,CAACkB,mBAAmB,EAAE;MACtBG,aAAa,CAACC,SAAS,CAAC;MAExB;IACJ;IAEA,KAAKC,cAAc,CAAC,CAAC;EACzB,CAAC,EAAE,CAACL,mBAAmB,CAAC,CAAC;EAEzB,MAAMgC,cAAc,GAAGjD,OAAO,CAAC,MAAM;IACjC,MAAMkD,GAAG,GAAG,CAACpC,YAAY,IAAI,EAAE,EAAEc,GAAG,CAACuB,KAAA,IAA6B;MAAA,IAA5B;QAAEtB,KAAK;QAAEU,QAAQ;QAAEJ;MAAG,CAAC,GAAAgB,KAAA;MACzD,IAAIjB,QAAQ,GAAGL,KAAK;MAEpB,IAAIjC,KAAK,CAACiC,KAAK,CAAC,EAAE;QACd,MAAM;UAAEC,CAAC;UAAEC,CAAC;UAAEC,CAAC;UAAEC;QAAE,CAAC,GAAG3B,QAAQ,CAACuB,KAAK,CAAC;QAEtCK,QAAQ,GAAG,QAAQJ,CAAC,IAAIC,CAAC,IAAIC,CAAC,IAAIC,CAAC,GAAG;MAC1C;MAEA,OAAO;QACHE,EAAE;QACFI,QAAQ;QACRV,KAAK,EAAEK;MACX,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CAAC,GAAG9B,YAAY,EAAE,IAAIe,UAAU,IAAI,EAAE,CAAC,EAAE,GAAG+B,GAAG,CAAC;EAC3D,CAAC,EAAE,CAACpC,YAAY,EAAEK,UAAU,CAAC,CAAC;EAE9B,MAAMiC,OAAO,GAAGpD,OAAO,CAAC,MAAM;IAC1B,MAAMqD,KAAqB,GAAG,EAAE;IAEhCJ,cAAc,CAACK,OAAO,CAACC,KAAA,IAAmB;MAAA,IAAlB;QAAE1B,KAAK;QAAEM;MAAG,CAAC,GAAAoB,KAAA;MACjCF,KAAK,CAACG,IAAI,cAAC3D,KAAA,CAAA4D,aAAA,CAAC/C,WAAW;QAACgD,GAAG,EAAE,iBAAiBvB,EAAE,EAAG;QAACN,KAAK,EAAEA;MAAM,CAAE,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,OAAOwB,KAAK;EAChB,CAAC,EAAE,CAACJ,cAAc,CAAC,CAAC;EAEpB,MAAMU,kBAAkB,GAAG3D,OAAO,CAC9B,MAAMiD,cAAc,CAACR,IAAI,CAACmB,KAAA;IAAA,IAAC;MAAE/B;IAAM,CAAC,GAAA+B,KAAA;IAAA,OAAK/B,KAAK,KAAKX,aAAa;EAAA,EAAC,EACjE,CAAC+B,cAAc,EAAE/B,aAAa,CAClC,CAAC;EAED,MAAM2C,cAAc,GAAIC,WAAyB,IAAK;IAClD,IAAI,OAAO9C,gBAAgB,KAAK,UAAU,EAAE;MACxCA,gBAAgB,CAAC8C,WAAW,CAAC;IACjC;IAEA1C,aAAa,CAAEK,UAAU,IAAK;MAC1B,MAAMD,MAAM,GAAG,CAAC,IAAIC,UAAU,IAAI,EAAE,CAAC,EAAEqC,WAAW,CAAC;MAEnD,MAAMpC,SAAS,GAAGF,MAAM,EAAEI,GAAG,CAACmC,KAAA,IAAe;QAAA,IAAd;UAAElC;QAAM,CAAC,GAAAkC,KAAA;QACpC,MAAMf,SAAS,GAAG3C,gBAAgB,CAACwB,KAAK,CAAC;QAEzC,OAAOtB,QAAQ,CAACyC,SAAS,CAAC;MAC9B,CAAC,CAAC;MAEF,KAAK9C,aAAa,CAACwB,SAAS,CAAC;MAE7B,OAAOF,MAAM;IACjB,CAAC,CAAC;EACN,CAAC;EAED,MAAMwC,iBAAiB,GAAIzC,aAAiC,IAAK;IAC7D,KAAKD,cAAc,CAACC,aAAa,CAAC;IAElC,IAAI,OAAOR,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAACQ,aAAa,CAAC;IACtC;EACJ,CAAC;EAED,oBACI1B,KAAA,CAAA4D,aAAA,CAAC9C,kBAAkB,QACdyC,OAAO,eACRvD,KAAA,CAAA4D,aAAA,CAAChD,YAAY;IACT0B,EAAE,EAAEwB,kBAAkB,EAAExB,EAAG;IAC3BI,QAAQ,EAAEoB,kBAAkB,EAAEpB,QAAS;IACvC0B,KAAK,EAAEJ,cAAe;IACtBK,QAAQ,EAAEF;EAAkB,CAC/B,CACe,CAAC;AAE7B,CAAC;AAEDpD,YAAY,CAACuD,WAAW,GAAG,cAAc;AAEzC,eAAevD,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"PresetColors.js","names":["isHex","React","useContext","useEffect","useMemo","useState","putSiteColors","getSiteColors","PRESETCOLORS","extractRgbValues","hexToRgb","rgbToHex","ColorPickerContext","PresetButton","PresetColor","StyledPresetColors","PresetColors","presetColors","onPresetColorRemove","onPresetColorAdd","shouldUseSiteColors","shouldHideDefaultPresetColors","selectedColor","siteColors","setSiteColors","undefined","loadSiteColors","presetColorId","colors","prevColors","newColors","value","map","color","r","g","b","a","newColor","id","Math","random","toString","isCustom","deletedColor","find","filteredColors","filter","formattedColors","rgbValues","combinedColors","tmp","content","items","forEach","push","createElement","key","currentPresetColor","handleAddColor","presetColor","handleRemoveColor","onAdd","onRemove","displayName"],"sources":["../../../../../src/components/color-picker-popup/preset-colors/PresetColors.tsx"],"sourcesContent":["import { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ReactElement } from 'react';\n\nimport { putSiteColors } from '../../../api/color/get';\nimport { getSiteColors } from '../../../api/color/put';\nimport { PRESETCOLORS } from '../../../constants/color';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport { extractRgbValues, hexToRgb, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport PresetButton from './preset-button/PresetButton';\nimport PresetColor from './preset-color/PresetColor';\nimport { StyledPresetColors } from './PresetColors.styles';\n\ninterface PresetColorsProps {\n presetColors?: IPresetColor[];\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n shouldUseSiteColors: boolean;\n shouldHideDefaultPresetColors: boolean;\n}\n\nconst PresetColors = ({\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldUseSiteColors,\n shouldHideDefaultPresetColors,\n}: PresetColorsProps) => {\n const { selectedColor } = useContext(ColorPickerContext);\n\n const [siteColors, setSiteColors] = useState<IPresetColor[] \| undefined>(undefined);\n\n const loadSiteColors = async (presetColorId?: IPresetColor['id']) => {\n const colors = await getSiteColors();\n\n setSiteColors((prevColors) => {\n const newColors = colors.value.map((color) => {\n const { r, g, b, a } = hexToRgb(color);\n\n const newColor = `rgba(${r},${g},${b},${a})`;\n\n return {\n color: newColor,\n id: Math.random().toString(),\n isCustom: true,\n };\n });\n\n if (!presetColorId) {\n return newColors;\n }\n\n const deletedColor = prevColors?.find(({ id }) => id === presetColorId)?.color;\n\n if (!deletedColor) {\n return newColors;\n }\n\n const filteredColors = newColors?.filter(({ color }) => color !== deletedColor);\n\n const formattedColors = filteredColors?.map(({ color }) => {\n const rgbValues = extractRgbValues(color);\n\n return rgbToHex(rgbValues);\n });\n\n void putSiteColors(formattedColors ?? []);\n\n return filteredColors;\n });\n };\n\n useEffect(() => {\n if (!shouldUseSiteColors) {\n setSiteColors(undefined);\n\n return;\n }\n\n void loadSiteColors();\n }, [shouldUseSiteColors]);\n\n const combinedColors = useMemo(() => {\n const tmp = (presetColors ?? []).map(({ color, isCustom, id }) => {\n let newColor = color;\n\n if (isHex(color)) {\n const { r, g, b, a } = hexToRgb(color);\n\n newColor = `rgba(${r},${g},${b},${a})`;\n }\n\n return {\n id,\n isCustom,\n color: newColor,\n };\n });\n\n if (shouldHideDefaultPresetColors) {\n return tmp;\n }\n\n return [...PRESETCOLORS, ...(siteColors ?? []), ...tmp];\n }, [presetColors, shouldHideDefaultPresetColors, siteColors]);\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n combinedColors.forEach(({ color, id }) => {\n items.push(<PresetColor key={`preset-color__${id}`} color={color} />);\n });\n\n return items;\n }, [combinedColors]);\n\n const currentPresetColor = useMemo(\n () => combinedColors.find(({ color }) => color === selectedColor),\n [combinedColors, selectedColor],\n );\n\n const handleAddColor = (presetColor: IPresetColor) => {\n if (typeof onPresetColorAdd === 'function') {\n onPresetColorAdd(presetColor);\n }\n\n setSiteColors((prevColors) => {\n const colors = [...(prevColors ?? []), presetColor];\n\n const newColors = colors?.map(({ color }) => {\n const rgbValues = extractRgbValues(color);\n\n return rgbToHex(rgbValues);\n });\n\n void putSiteColors(newColors);\n\n return colors;\n });\n };\n\n const handleRemoveColor = (presetColorId: IPresetColor['id']) => {\n void loadSiteColors(presetColorId);\n\n if (typeof onPresetColorRemove === 'function') {\n onPresetColorRemove(presetColorId);\n }\n };\n\n return (\n <StyledPresetColors>\n {content}\n {!shouldHideDefaultPresetColors && (\n <PresetButton\n id={currentPresetColor?.id}\n isCustom={currentPresetColor?.isCustom}\n onAdd={handleAddColor}\n onRemove={handleRemoveColor}\n />\n )}\n </StyledPresetColors>\n );\n};\n\nPresetColors.displayName = 'PresetColors';\n\nexport default PresetColors;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,gBAAgB;AACtC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAA2B,OAAO;AAE1F,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,YAAY,QAAQ,0BAA0B;AAEvD,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,sBAAsB;AAC3E,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAU1D,MAAMC,YAAY,GAAGA,CAAC;EAClBC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,mBAAmB;EACnBC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAc,CAAC,GAAGpB,UAAU,CAACU,kBAAkB,CAAC;EAExD,MAAM,CAACW,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAA6BoB,SAAS,CAAC;EAEnF,MAAMC,cAAc,GAAG,MAAOC,aAAkC,IAAK;IACjE,MAAMC,MAAM,GAAG,MAAMrB,aAAa,CAAC,CAAC;IAEpCiB,aAAa,CAAEK,UAAU,IAAK;MAC1B,MAAMC,SAAS,GAAGF,MAAM,CAACG,KAAK,CAACC,GAAG,CAAEC,KAAK,IAAK;QAC1C,MAAM;UAAEC,CAAC;UAAEC,CAAC;UAAEC,CAAC;UAAEC;QAAE,CAAC,GAAG3B,QAAQ,CAACuB,KAAK,CAAC;QAEtC,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,IAAIC,CAAC,IAAIC,CAAC,IAAIC,CAAC,GAAG;QAE5C,OAAO;UACHJ,KAAK,EAAEK,QAAQ;UACfC,EAAE,EAAEC,IAAI,CAACC,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;UAC5BC,QAAQ,EAAE;QACd,CAAC;MACL,CAAC,CAAC;MAEF,IAAI,CAAChB,aAAa,EAAE;QAChB,OAAOG,SAAS;MACpB;MAEA,MAAMc,YAAY,GAAGf,UAAU,EAAEgB,IAAI,CAAC,CAAC;QAAEN;MAAG,CAAC,KAAKA,EAAE,KAAKZ,aAAa,CAAC,EAAEM,KAAK;MAE9E,IAAI,CAACW,YAAY,EAAE;QACf,OAAOd,SAAS;MACpB;MAEA,MAAMgB,cAAc,GAAGhB,SAAS,EAAEiB,MAAM,CAAC,CAAC;QAAEd;MAAM,CAAC,KAAKA,KAAK,KAAKW,YAAY,CAAC;MAE/E,MAAMI,eAAe,GAAGF,cAAc,EAAEd,GAAG,CAAC,CAAC;QAAEC;MAAM,CAAC,KAAK;QACvD,MAAMgB,SAAS,GAAGxC,gBAAgB,CAACwB,KAAK,CAAC;QAEzC,OAAOtB,QAAQ,CAACsC,SAAS,CAAC;MAC9B,CAAC,CAAC;MAEF,KAAK3C,aAAa,CAAC0C,eAAe,IAAI,EAAE,CAAC;MAEzC,OAAOF,cAAc;IACzB,CAAC,CAAC;EACN,CAAC;EAED3C,SAAS,CAAC,MAAM;IACZ,IAAI,CAACiB,mBAAmB,EAAE;MACtBI,aAAa,CAACC,SAAS,CAAC;MAExB;IACJ;IAEA,KAAKC,cAAc,CAAC,CAAC;EACzB,CAAC,EAAE,CAACN,mBAAmB,CAAC,CAAC;EAEzB,MAAM8B,cAAc,GAAG9C,OAAO,CAAC,MAAM;IACjC,MAAM+C,GAAG,GAAG,CAAClC,YAAY,IAAI,EAAE,EAAEe,GAAG,CAAC,CAAC;MAAEC,KAAK;MAAEU,QAAQ;MAAEJ;IAAG,CAAC,KAAK;MAC9D,IAAID,QAAQ,GAAGL,KAAK;MAEpB,IAAIjC,KAAK,CAACiC,KAAK,CAAC,EAAE;QACd,MAAM;UAAEC,CAAC;UAAEC,CAAC;UAAEC,CAAC;UAAEC;QAAE,CAAC,GAAG3B,QAAQ,CAACuB,KAAK,CAAC;QAEtCK,QAAQ,GAAG,QAAQJ,CAAC,IAAIC,CAAC,IAAIC,CAAC,IAAIC,CAAC,GAAG;MAC1C;MAEA,OAAO;QACHE,EAAE;QACFI,QAAQ;QACRV,KAAK,EAAEK;MACX,CAAC;IACL,CAAC,CAAC;IAEF,IAAIjB,6BAA6B,EAAE;MAC/B,OAAO8B,GAAG;IACd;IAEA,OAAO,CAAC,GAAG3C,YAAY,EAAE,IAAIe,UAAU,IAAI,EAAE,CAAC,EAAE,GAAG4B,GAAG,CAAC;EAC3D,CAAC,EAAE,CAAClC,YAAY,EAAEI,6BAA6B,EAAEE,UAAU,CAAC,CAAC;EAE7D,MAAM6B,OAAO,GAAGhD,OAAO,CAAC,MAAM;IAC1B,MAAMiD,KAAqB,GAAG,EAAE;IAEhCH,cAAc,CAACI,OAAO,CAAC,CAAC;MAAErB,KAAK;MAAEM;IAAG,CAAC,KAAK;MACtCc,KAAK,CAACE,IAAI,cAACtD,KAAA,CAAAuD,aAAA,CAAC1C,WAAW;QAAC2C,GAAG,EAAE,iBAAiBlB,EAAE,EAAG;QAACN,KAAK,EAAEA;MAAM,CAAE,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,OAAOoB,KAAK;EAChB,CAAC,EAAE,CAACH,cAAc,CAAC,CAAC;EAEpB,MAAMQ,kBAAkB,GAAGtD,OAAO,CAC9B,MAAM8C,cAAc,CAACL,IAAI,CAAC,CAAC;IAAEZ;EAAM,CAAC,KAAKA,KAAK,KAAKX,aAAa,CAAC,EACjE,CAAC4B,cAAc,EAAE5B,aAAa,CAClC,CAAC;EAED,MAAMqC,cAAc,GAAIC,WAAyB,IAAK;IAClD,IAAI,OAAOzC,gBAAgB,KAAK,UAAU,EAAE;MACxCA,gBAAgB,CAACyC,WAAW,CAAC;IACjC;IAEApC,aAAa,CAAEK,UAAU,IAAK;MAC1B,MAAMD,MAAM,GAAG,CAAC,IAAIC,UAAU,IAAI,EAAE,CAAC,EAAE+B,WAAW,CAAC;MAEnD,MAAM9B,SAAS,GAAGF,MAAM,EAAEI,GAAG,CAAC,CAAC;QAAEC;MAAM,CAAC,KAAK;QACzC,MAAMgB,SAAS,GAAGxC,gBAAgB,CAACwB,KAAK,CAAC;QAEzC,OAAOtB,QAAQ,CAACsC,SAAS,CAAC;MAC9B,CAAC,CAAC;MAEF,KAAK3C,aAAa,CAACwB,SAAS,CAAC;MAE7B,OAAOF,MAAM;IACjB,CAAC,CAAC;EACN,CAAC;EAED,MAAMiC,iBAAiB,GAAIlC,aAAiC,IAAK;IAC7D,KAAKD,cAAc,CAACC,aAAa,CAAC;IAElC,IAAI,OAAOT,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAACS,aAAa,CAAC;IACtC;EACJ,CAAC;EAED,oBACI1B,KAAA,CAAAuD,aAAA,CAACzC,kBAAkB,QACdqC,OAAO,EACP,CAAC/B,6BAA6B,iBAC3BpB,KAAA,CAAAuD,aAAA,CAAC3C,YAAY;IACT0B,EAAE,EAAEmB,kBAAkB,EAAEnB,EAAG;IAC3BI,QAAQ,EAAEe,kBAAkB,EAAEf,QAAS;IACvCmB,KAAK,EAAEH,cAAe;IACtBI,QAAQ,EAAEF;EAAkB,CAC/B,CAEW,CAAC;AAE7B,CAAC;AAED7C,YAAY,CAACgD,WAAW,GAAG,cAAc;AAEzC,eAAehD,YAAY","ignoreList":[]}

package/lib/esm/components/color-picker-popup/preset-colors/preset-button/PresetButton.js CHANGED Viewed

@@ -3,13 +3,12 @@ import React, { useContext } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { ColorPickerContext } from '../../../ColorPickerProvider';
 import { StyledPresetButton } from './PresetButton.styles';
-const PresetButton = _ref => {
-  let {
-    id,
-    isCustom,
-    onRemove,
-    onAdd
-  } = _ref;
+const PresetButton = ({
+  id,
+  isCustom,
+  onRemove,
+  onAdd
+}) => {
   const {
     selectedColor
   } = useContext(ColorPickerContext);

package/lib/esm/components/color-picker-popup/preset-colors/preset-button/PresetButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetButton.js","names":["Icon","React","useContext","v4","uuidv4","ColorPickerContext","StyledPresetButton","PresetButton","~~_ref","~~id","isCustom","onRemove","onAdd","selectedColor","icon","handleClick","color","createElement","onClick","$isDisabled","icons","size","displayName"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-button/PresetButton.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { IPresetColor } from '../../../../types/colorPicker';\nimport { ColorPickerContext } from '../../../ColorPickerProvider';\nimport { StyledPresetButton } from './PresetButton.styles';\n\ninterface PresetButtonProps {\n id?: IPresetColor['id'];\n isCustom?: IPresetColor['isCustom'];\n onAdd?: (color: IPresetColor) => void;\n onRemove?: (id: IPresetColor['id']) => void;\n}\n\nconst PresetButton = ({ id, isCustom, onRemove, onAdd }: PresetButtonProps) => {\n const { selectedColor } = useContext(ColorPickerContext);\n\n const icon = isCustom ? ['fa-solid fa-trash'] : ['fa-solid fa-plus'];\n\n const handleClick = () => {\n if (id) {\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n } else if (typeof onAdd === 'function' && selectedColor) {\n onAdd({ color: selectedColor, isCustom: true, id: uuidv4() });\n }\n };\n\n return (\n <StyledPresetButton onClick={handleClick} $isDisabled={!!id && !isCustom}>\n <Icon icons={icon} size={isCustom ? 10 : 15} />\n </StyledPresetButton>\n );\n};\n\nPresetButton.displayName = 'PresetButton';\n\nexport default PresetButton;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,kBAAkB,QAAQ,uBAAuB;AAS1D,MAAMC,YAAY,~~GAAGC~~,~~IAAA,IAA0D~~;~~EAAA~~,~~IAAzD;IAAEC,~~EAAE;~~IAAEC~~,QAAQ;~~IAAEC~~,QAAQ;~~IAAEC~~;~~EAAyB~~,CAAC,~~GAAAJ,IAAA~~;~~EACtE~~,MAAM;~~IAAEK~~;EAAc,CAAC,~~GAAGX~~,UAAU,CAACG,kBAAkB,CAAC;EAExD,~~MAAMS~~,IAAI,GAAGJ,QAAQ,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,CAAC;EAEpE,MAAMK,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAIN,EAAE,EAAE;MACJ,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACF,EAAE,CAAC;MAChB;IACJ,CAAC,MAAM,IAAI,OAAOG,KAAK,KAAK,UAAU,IAAIC,aAAa,EAAE;MACrDD,KAAK,CAAC;QAAEI,KAAK,EAAEH,aAAa;QAAEH,QAAQ,EAAE,IAAI;QAAED,EAAE,~~EAAEL~~,MAAM,CAAC;MAAE,CAAC,CAAC;IACjE;EACJ,CAAC;EAED,oBACIH,KAAA,~~CAAAgB~~,aAAA,~~CAACX~~,kBAAkB;~~IAACY~~,OAAO,EAAEH,WAAY;IAACI,WAAW,EAAE,CAAC,CAACV,EAAE,IAAI,CAACC;EAAS,~~gBACrET~~,KAAA,~~CAAAgB~~,aAAA,~~CAACjB~~,IAAI;~~IAACoB~~,KAAK,EAAEN,IAAK;IAACO,IAAI,EAAEX,QAAQ,GAAG,EAAE,GAAG;EAAG,CAAE,CAC9B,CAAC;AAE7B,CAAC;~~AAEDH~~,YAAY,~~CAACe~~,WAAW,GAAG,cAAc;AAEzC,~~eAAef~~,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"PresetButton.js","names":["Icon","React","useContext","v4","uuidv4","ColorPickerContext","StyledPresetButton","PresetButton","id","isCustom","onRemove","onAdd","selectedColor","icon","handleClick","color","createElement","onClick","$isDisabled","icons","size","displayName"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-button/PresetButton.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { IPresetColor } from '../../../../types/colorPicker';\nimport { ColorPickerContext } from '../../../ColorPickerProvider';\nimport { StyledPresetButton } from './PresetButton.styles';\n\ninterface PresetButtonProps {\n id?: IPresetColor['id'];\n isCustom?: IPresetColor['isCustom'];\n onAdd?: (color: IPresetColor) => void;\n onRemove?: (id: IPresetColor['id']) => void;\n}\n\nconst PresetButton = ({ id, isCustom, onRemove, onAdd }: PresetButtonProps) => {\n const { selectedColor } = useContext(ColorPickerContext);\n\n const icon = isCustom ? ['fa-solid fa-trash'] : ['fa-solid fa-plus'];\n\n const handleClick = () => {\n if (id) {\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n } else if (typeof onAdd === 'function' && selectedColor) {\n onAdd({ color: selectedColor, isCustom: true, id: uuidv4() });\n }\n };\n\n return (\n <StyledPresetButton onClick={handleClick} $isDisabled={!!id && !isCustom}>\n <Icon icons={icon} size={isCustom ? 10 : 15} />\n </StyledPresetButton>\n );\n};\n\nPresetButton.displayName = 'PresetButton';\n\nexport default PresetButton;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,kBAAkB,QAAQ,uBAAuB;AAS1D,MAAMC,YAAY,GAAGA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC;AAAyB,CAAC,KAAK;EAC3E,MAAM;IAAEC;EAAc,CAAC,GAAGV,UAAU,CAACG,kBAAkB,CAAC;EAExD,MAAMQ,IAAI,GAAGJ,QAAQ,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,CAAC;EAEpE,MAAMK,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAIN,EAAE,EAAE;MACJ,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACF,EAAE,CAAC;MAChB;IACJ,CAAC,MAAM,IAAI,OAAOG,KAAK,KAAK,UAAU,IAAIC,aAAa,EAAE;MACrDD,KAAK,CAAC;QAAEI,KAAK,EAAEH,aAAa;QAAEH,QAAQ,EAAE,IAAI;QAAED,EAAE,EAAEJ,MAAM,CAAC;MAAE,CAAC,CAAC;IACjE;EACJ,CAAC;EAED,oBACIH,KAAA,CAAAe,aAAA,CAACV,kBAAkB;IAACW,OAAO,EAAEH,WAAY;IAACI,WAAW,EAAE,CAAC,CAACV,EAAE,IAAI,CAACC;EAAS,gBACrER,KAAA,CAAAe,aAAA,CAAChB,IAAI;IAACmB,KAAK,EAAEN,IAAK;IAACO,IAAI,EAAEX,QAAQ,GAAG,EAAE,GAAG;EAAG,CAAE,CAC9B,CAAC;AAE7B,CAAC;AAEDF,YAAY,CAACc,WAAW,GAAG,cAAc;AAEzC,eAAed,YAAY","ignoreList":[]}

package/lib/esm/components/color-picker-popup/preset-colors/preset-button/PresetButton.styles.js CHANGED Viewed

@@ -7,19 +7,13 @@ export const StyledPresetButton = styled.div`
     background-color: transparent;
     width: 22px;
     aspect-ratio: 1;
-    cursor: ${_ref => {
-  let {
-    $isDisabled
-  } = _ref;
-  return $isDisabled ? 'normal' : 'pointer';
-}};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'normal' : 'pointer'};
-    opacity: ${_ref2 => {
-  let {
-    $isDisabled
-  } = _ref2;
-  return $isDisabled ? 0.5 : 1;
-}};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
     border-radius: 50px;
     border: 1px solid rgba(160, 160, 160, 0.3);

package/lib/esm/components/color-picker-popup/preset-colors/preset-button/PresetButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetButton.styles.js","names":["styled","StyledPresetButton","div","~~_ref","~~$isDisabled"~~,"_ref2"~~],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-button/PresetButton.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledPresetButtonProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledPresetButton = styled.div<StyledPresetButtonProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: transparent;\n width: 22px;\n aspect-ratio: 1;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'normal' : 'pointer')};\n\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n\n border-radius: 50px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAItC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~cAAcC~~,~~IAAA~~;~~EAAA,IAAC~~;~~IAAEC;EAAY~~,CAAC,~~GAAAD~~,~~IAAA;EAAA,OAAMC,~~WAAW,GAAG,QAAQ,GAAG,~~SAAS~~;~~AAAA,CAAC;~~AACvE;AACA,~~eAAeC~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAED;EAAY~~,CAAC,~~GAAAC~~,~~KAAA;EAAA,OAAMD,~~WAAW,GAAG,GAAG,GAAG,~~CAAC~~;~~AAAA,CAAC;~~AAC3D;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"PresetButton.styles.js","names":["styled","StyledPresetButton","div","$isDisabled"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-button/PresetButton.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledPresetButtonProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledPresetButton = styled.div<StyledPresetButtonProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: transparent;\n width: 22px;\n aspect-ratio: 1;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'normal' : 'pointer')};\n\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n\n border-radius: 50px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAItC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,SAAU;AACvE;AACA,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/color-picker-popup/preset-colors/preset-color/PresetColor.js CHANGED Viewed

@@ -1,10 +1,9 @@
 import React, { useContext, useMemo } from 'react';
 import { ColorPickerContext } from '../../../ColorPickerProvider';
 import { StyledPresetColor, StyledPresetColorBackground, StyledPresetColorColor } from './PresetColor.styles';
-const PresetColor = _ref => {
-  let {
-    color
-  } = _ref;
+const PresetColor = ({
+  color
+}) => {
   const {
     selectedColor,
     updateSelectedColor,

package/lib/esm/components/color-picker-popup/preset-colors/preset-color/PresetColor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetColor.js","names":["React","useContext","useMemo","ColorPickerContext","StyledPresetColor","StyledPresetColorBackground","StyledPresetColorColor","PresetColor","~~_ref","~~color","selectedColor","updateSelectedColor","updateHueColor","updateShouldCallOnSelect","updateShouldGetCoordinates","updateIsPresetColor","isSelected","handleClick","createElement","onClick","$isSelected","$color","displayName"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-color/PresetColor.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\n\nimport type { IPresetColor } from '../../../../types/colorPicker';\nimport { ColorPickerContext } from '../../../ColorPickerProvider';\nimport {\n StyledPresetColor,\n StyledPresetColorBackground,\n StyledPresetColorColor,\n} from './PresetColor.styles';\n\ninterface PresetColorProps {\n color: IPresetColor['color'];\n}\n\nconst PresetColor = ({ color }: PresetColorProps) => {\n const {\n selectedColor,\n updateSelectedColor,\n updateHueColor,\n updateShouldCallOnSelect,\n updateShouldGetCoordinates,\n updateIsPresetColor,\n } = useContext(ColorPickerContext);\n\n const isSelected = useMemo(() => selectedColor === color, [color, selectedColor]);\n\n const handleClick = () => {\n if (typeof updateSelectedColor === 'function') {\n updateSelectedColor(color);\n }\n\n if (typeof updateHueColor === 'function') {\n updateHueColor(color);\n }\n\n if (typeof updateIsPresetColor === 'function') {\n updateIsPresetColor(true);\n }\n\n if (typeof updateShouldCallOnSelect === 'function') {\n updateShouldCallOnSelect(true);\n }\n\n if (typeof updateShouldGetCoordinates === 'function') {\n updateShouldGetCoordinates(true);\n }\n };\n\n return (\n <StyledPresetColor onClick={handleClick} $isSelected={isSelected}>\n <StyledPresetColorBackground />\n <StyledPresetColorColor $color={color} />\n </StyledPresetColor>\n );\n};\n\nPresetColor.displayName = 'PresetColor';\n\nexport default PresetColor;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAGlD,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SACIC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,QACnB,sBAAsB;AAM7B,MAAMC,WAAW,~~GAAGC~~,~~IAAA,IAAiC~~;~~EAAA,IAAhC~~;~~IAAEC;EAAwB~~,CAAC,~~GAAAD,IAAA~~;~~EAC5C~~,MAAM;~~IACFE~~,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,wBAAwB;IACxBC,0BAA0B;IAC1BC;EACJ,CAAC,~~GAAGd~~,UAAU,CAACE,kBAAkB,CAAC;EAElC,~~MAAMa~~,UAAU,~~GAAGd~~,OAAO,CAAC,~~MAAMQ~~,aAAa,KAAKD,KAAK,EAAE,CAACA,KAAK,EAAEC,aAAa,CAAC,CAAC;EAEjF,MAAMO,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAON,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAACF,KAAK,CAAC;IAC9B;IAEA,IAAI,OAAOG,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACH,KAAK,CAAC;IACzB;IAEA,IAAI,OAAOM,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAAC,IAAI,CAAC;IAC7B;IAEA,IAAI,OAAOF,wBAAwB,KAAK,UAAU,EAAE;MAChDA,wBAAwB,CAAC,IAAI,CAAC;IAClC;IAEA,IAAI,OAAOC,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAAC,IAAI,CAAC;IACpC;EACJ,CAAC;EAED,~~oBACId~~,KAAA,~~CAAAkB~~,aAAA,~~CAACd~~,iBAAiB;~~IAACe~~,OAAO,EAAEF,WAAY;IAACG,WAAW,EAAEJ;EAAW,~~gBAC7DhB~~,KAAA,~~CAAAkB~~,aAAA,~~CAACb~~,2BAA2B,MAAE,CAAC,eAC/BL,KAAA,~~CAAAkB~~,aAAA,~~CAACZ~~,sBAAsB;~~IAACe~~,MAAM,EAAEZ;EAAM,CAAE,CACzB,CAAC;AAE5B,CAAC;~~AAEDF~~,WAAW,~~CAACe~~,WAAW,GAAG,aAAa;AAEvC,~~eAAef~~,WAAW","ignoreList":[]}
1	+ {"version":3,"file":"PresetColor.js","names":["React","useContext","useMemo","ColorPickerContext","StyledPresetColor","StyledPresetColorBackground","StyledPresetColorColor","PresetColor","color","selectedColor","updateSelectedColor","updateHueColor","updateShouldCallOnSelect","updateShouldGetCoordinates","updateIsPresetColor","isSelected","handleClick","createElement","onClick","$isSelected","$color","displayName"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-color/PresetColor.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\n\nimport type { IPresetColor } from '../../../../types/colorPicker';\nimport { ColorPickerContext } from '../../../ColorPickerProvider';\nimport {\n StyledPresetColor,\n StyledPresetColorBackground,\n StyledPresetColorColor,\n} from './PresetColor.styles';\n\ninterface PresetColorProps {\n color: IPresetColor['color'];\n}\n\nconst PresetColor = ({ color }: PresetColorProps) => {\n const {\n selectedColor,\n updateSelectedColor,\n updateHueColor,\n updateShouldCallOnSelect,\n updateShouldGetCoordinates,\n updateIsPresetColor,\n } = useContext(ColorPickerContext);\n\n const isSelected = useMemo(() => selectedColor === color, [color, selectedColor]);\n\n const handleClick = () => {\n if (typeof updateSelectedColor === 'function') {\n updateSelectedColor(color);\n }\n\n if (typeof updateHueColor === 'function') {\n updateHueColor(color);\n }\n\n if (typeof updateIsPresetColor === 'function') {\n updateIsPresetColor(true);\n }\n\n if (typeof updateShouldCallOnSelect === 'function') {\n updateShouldCallOnSelect(true);\n }\n\n if (typeof updateShouldGetCoordinates === 'function') {\n updateShouldGetCoordinates(true);\n }\n };\n\n return (\n <StyledPresetColor onClick={handleClick} $isSelected={isSelected}>\n <StyledPresetColorBackground />\n <StyledPresetColorColor $color={color} />\n </StyledPresetColor>\n );\n};\n\nPresetColor.displayName = 'PresetColor';\n\nexport default PresetColor;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAGlD,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SACIC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,QACnB,sBAAsB;AAM7B,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAwB,CAAC,KAAK;EACjD,MAAM;IACFC,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,wBAAwB;IACxBC,0BAA0B;IAC1BC;EACJ,CAAC,GAAGb,UAAU,CAACE,kBAAkB,CAAC;EAElC,MAAMY,UAAU,GAAGb,OAAO,CAAC,MAAMO,aAAa,KAAKD,KAAK,EAAE,CAACA,KAAK,EAAEC,aAAa,CAAC,CAAC;EAEjF,MAAMO,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAON,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAACF,KAAK,CAAC;IAC9B;IAEA,IAAI,OAAOG,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACH,KAAK,CAAC;IACzB;IAEA,IAAI,OAAOM,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAAC,IAAI,CAAC;IAC7B;IAEA,IAAI,OAAOF,wBAAwB,KAAK,UAAU,EAAE;MAChDA,wBAAwB,CAAC,IAAI,CAAC;IAClC;IAEA,IAAI,OAAOC,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAAC,IAAI,CAAC;IACpC;EACJ,CAAC;EAED,oBACIb,KAAA,CAAAiB,aAAA,CAACb,iBAAiB;IAACc,OAAO,EAAEF,WAAY;IAACG,WAAW,EAAEJ;EAAW,gBAC7Df,KAAA,CAAAiB,aAAA,CAACZ,2BAA2B,MAAE,CAAC,eAC/BL,KAAA,CAAAiB,aAAA,CAACX,sBAAsB;IAACc,MAAM,EAAEZ;EAAM,CAAE,CACzB,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACc,WAAW,GAAG,aAAa;AAEvC,eAAed,WAAW","ignoreList":[]}