@chayns-components/color-picker 5.0.0-beta.911 → 5.0.0-beta.913

package/lib/cjs/components/ColorPickerProvider.js

@@ -18,7 +18,9 @@ const ColorPickerContext = exports.ColorPickerContext = /*#__PURE__*/_react.defa
   shouldGetCoordinates: undefined,
   updateShouldGetCoordinates: undefined,
   shouldCallOnSelect: undefined,
-  updateShouldCallOnSelect: undefined
+  updateShouldCallOnSelect: undefined,
+  canGetColorFromArea: undefined,
+  updateCanGetColorFromArea: undefined
 });
 ColorPickerContext.displayName = 'ColorPickerContext';
 const ColorPickerProvider = ({
@@ -31,6 +33,7 @@ const ColorPickerProvider = ({
   const [internalIsPresetColor, setInternalIsPresetColor] = (0, _react.useState)(false);
   const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = (0, _react.useState)(true);
   const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = (0, _react.useState)(false);
+  const [internalCanGetColorFromArea, setInternalCanGetColorFromArea] = (0, _react.useState)(false);
   const updateSelectedColor = (0, _react.useCallback)(color => {
     setInternalSelectedColor(color);
   }, []);
@@ -46,6 +49,9 @@ const ColorPickerProvider = ({
   const updateShouldCallOnSelect = (0, _react.useCallback)(shouldCallOnSelect => {
     setInternalShouldCallOnSelect(shouldCallOnSelect);
   }, []);
+  const updateCanGetColorFromArea = (0, _react.useCallback)(canGetColorFromArea => {
+    setInternalCanGetColorFromArea(canGetColorFromArea);
+  }, []);
   (0, _react.useEffect)(() => {
     let newColor = selectedColor;
     if (newColor && !(0, _color.isValidRGBA)(newColor)) {
@@ -77,8 +83,10 @@ const ColorPickerProvider = ({
     shouldGetCoordinates: internalShouldGetCoordinates,
     updateShouldGetCoordinates,
     shouldCallOnSelect: internalShouldCallOnSelect,
-    updateShouldCallOnSelect
-  }), [internalHueColor, internalIsPresetColor, internalSelectedColor, internalShouldCallOnSelect, internalShouldGetCoordinates, updateHueColor, updateIsPresetColor, updateSelectedColor, updateShouldCallOnSelect, updateShouldGetCoordinates]);
+    updateShouldCallOnSelect,
+    canGetColorFromArea: internalCanGetColorFromArea,
+    updateCanGetColorFromArea
+  }), [internalCanGetColorFromArea, internalHueColor, internalIsPresetColor, internalSelectedColor, internalShouldCallOnSelect, internalShouldGetCoordinates, updateCanGetColorFromArea, updateHueColor, updateIsPresetColor, updateSelectedColor, updateShouldCallOnSelect, updateShouldGetCoordinates]);
   return /*#__PURE__*/_react.default.createElement(ColorPickerContext.Provider, {
     value: providerValue
   }, children);

package/lib/cjs/components/ColorPickerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerProvider.js","names":["_react","_interopRequireWildcard","require","_color","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerContext","exports","React","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","displayName","ColorPickerProvider","children","onSelect","internalSelectedColor","setInternalSelectedColor","useState","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","useCallback","color","useEffect","newColor","isValidRGBA","g","b","hexToRgb","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { hexToRgb, isValidRGBA } from '../utils/color';\n\ninterface IColorPickerContext {\n    selectedColor?: string;\n    updateSelectedColor?: (color: string | undefined) => void;\n    hueColor?: string;\n    updateHueColor?: (color: string | undefined) => void;\n    isPresetColor?: boolean;\n    updateIsPresetColor?: (isPresetColor: boolean) => void;\n    shouldGetCoordinates?: boolean;\n    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n    shouldCallOnSelect?: boolean;\n    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n    selectedColor: undefined,\n    updateSelectedColor: undefined,\n    hueColor: undefined,\n    updateHueColor: undefined,\n    isPresetColor: undefined,\n    updateIsPresetColor: undefined,\n    shouldGetCoordinates: undefined,\n    updateShouldGetCoordinates: undefined,\n    shouldCallOnSelect: undefined,\n    updateShouldCallOnSelect: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n    /**\n     * The children of the provider.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n    const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n    const [internalHueColor, setInternalHueColor] = useState<string>();\n    const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n    const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n    const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n\n    const updateSelectedColor = useCallback((color: string | undefined) => {\n        setInternalSelectedColor(color);\n    }, []);\n\n    const updateHueColor = useCallback((color: string | undefined) => {\n        setInternalHueColor(color);\n    }, []);\n\n    const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n        setInternalIsPresetColor(isPresetColor);\n    }, []);\n\n    const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n        setInternalShouldGetCoordinates(shouldGetCoordinates);\n    }, []);\n\n    const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n        setInternalShouldCallOnSelect(shouldCallOnSelect);\n    }, []);\n\n    useEffect(() => {\n        let newColor = selectedColor;\n\n        if (newColor && !isValidRGBA(newColor)) {\n            const { r, g, b, a } = hexToRgb(newColor);\n\n            newColor = `rgba(${r},${g},${b},${a})`;\n        }\n\n        setInternalSelectedColor(newColor);\n        setInternalHueColor(newColor);\n        setInternalIsPresetColor(true);\n    }, [selectedColor]);\n\n    useEffect(() => {\n        if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n            onSelect(internalSelectedColor);\n\n            setInternalShouldCallOnSelect(false);\n        }\n    }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n    const providerValue = useMemo<IColorPickerContext>(\n        () => ({\n            selectedColor: internalSelectedColor,\n            updateSelectedColor,\n            hueColor: internalHueColor,\n            updateHueColor,\n            isPresetColor: internalIsPresetColor,\n            updateIsPresetColor,\n            shouldGetCoordinates: internalShouldGetCoordinates,\n            updateShouldGetCoordinates,\n            shouldCallOnSelect: internalShouldCallOnSelect,\n            updateShouldCallOnSelect,\n        }),\n        [\n            internalHueColor,\n            internalIsPresetColor,\n            internalSelectedColor,\n            internalShouldCallOnSelect,\n            internalShouldGetCoordinates,\n            updateHueColor,\n            updateIsPresetColor,\n            updateSelectedColor,\n            updateShouldCallOnSelect,\n            updateShouldGetCoordinates,\n        ],\n    );\n\n    return (\n        <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n    );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorPickerProvider.js","names":["_react","_interopRequireWildcard","require","_color","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerContext","exports","React","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","canGetColorFromArea","updateCanGetColorFromArea","displayName","ColorPickerProvider","children","onSelect","internalSelectedColor","setInternalSelectedColor","useState","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","internalCanGetColorFromArea","setInternalCanGetColorFromArea","useCallback","color","useEffect","newColor","isValidRGBA","g","b","hexToRgb","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { hexToRgb, isValidRGBA } from '../utils/color';\n\ninterface IColorPickerContext {\n    selectedColor?: string;\n    updateSelectedColor?: (color: string | undefined) => void;\n    hueColor?: string;\n    updateHueColor?: (color: string | undefined) => void;\n    isPresetColor?: boolean;\n    updateIsPresetColor?: (isPresetColor: boolean) => void;\n    shouldGetCoordinates?: boolean;\n    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n    shouldCallOnSelect?: boolean;\n    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n    canGetColorFromArea?: boolean;\n    updateCanGetColorFromArea?: (canGetColorFromArea: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n    selectedColor: undefined,\n    updateSelectedColor: undefined,\n    hueColor: undefined,\n    updateHueColor: undefined,\n    isPresetColor: undefined,\n    updateIsPresetColor: undefined,\n    shouldGetCoordinates: undefined,\n    updateShouldGetCoordinates: undefined,\n    shouldCallOnSelect: undefined,\n    updateShouldCallOnSelect: undefined,\n    canGetColorFromArea: undefined,\n    updateCanGetColorFromArea: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n    /**\n     * The children of the provider.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n    const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n    const [internalHueColor, setInternalHueColor] = useState<string>();\n    const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n    const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n    const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n    const [internalCanGetColorFromArea, setInternalCanGetColorFromArea] = useState<boolean>(false);\n\n    const updateSelectedColor = useCallback((color: string | undefined) => {\n        setInternalSelectedColor(color);\n    }, []);\n\n    const updateHueColor = useCallback((color: string | undefined) => {\n        setInternalHueColor(color);\n    }, []);\n\n    const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n        setInternalIsPresetColor(isPresetColor);\n    }, []);\n\n    const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n        setInternalShouldGetCoordinates(shouldGetCoordinates);\n    }, []);\n\n    const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n        setInternalShouldCallOnSelect(shouldCallOnSelect);\n    }, []);\n\n    const updateCanGetColorFromArea = useCallback((canGetColorFromArea: boolean) => {\n        setInternalCanGetColorFromArea(canGetColorFromArea);\n    }, []);\n\n    useEffect(() => {\n        let newColor = selectedColor;\n\n        if (newColor && !isValidRGBA(newColor)) {\n            const { r, g, b, a } = hexToRgb(newColor);\n\n            newColor = `rgba(${r},${g},${b},${a})`;\n        }\n\n        setInternalSelectedColor(newColor);\n        setInternalHueColor(newColor);\n        setInternalIsPresetColor(true);\n    }, [selectedColor]);\n\n    useEffect(() => {\n        if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n            onSelect(internalSelectedColor);\n\n            setInternalShouldCallOnSelect(false);\n        }\n    }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n    const providerValue = useMemo<IColorPickerContext>(\n        () => ({\n            selectedColor: internalSelectedColor,\n            updateSelectedColor,\n            hueColor: internalHueColor,\n            updateHueColor,\n            isPresetColor: internalIsPresetColor,\n            updateIsPresetColor,\n            shouldGetCoordinates: internalShouldGetCoordinates,\n            updateShouldGetCoordinates,\n            shouldCallOnSelect: internalShouldCallOnSelect,\n            updateShouldCallOnSelect,\n            canGetColorFromArea: internalCanGetColorFromArea,\n            updateCanGetColorFromArea,\n        }),\n        [\n            internalCanGetColorFromArea,\n            internalHueColor,\n            internalIsPresetColor,\n            internalSelectedColor,\n            internalShouldCallOnSelect,\n            internalShouldGetCoordinates,\n            updateCanGetColorFromArea,\n            updateHueColor,\n            updateIsPresetColor,\n            updateSelectedColor,\n            updateShouldCallOnSelect,\n            updateShouldGetCoordinates,\n        ],\n    );\n\n    return (\n        <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n    );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js

@@ -38,7 +38,7 @@ const ColorPickerWrapper = ({
     content: content
   }, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfo, null, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColorWrapper, {
     $shouldShowRoundPreviewColor: shouldShowRoundPreviewColor
-  }, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColorBackground, null), /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColor, {
+  }, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColor, {
     $color: selectedColor
   })), shouldShowPreviewColorString && /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoText, null, selectedColor))) : content);
 };

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerWrapper.js","names":["_core","require","_react","_interopRequireWildcard","_ColorPickerPopup","_interopRequireDefault","_ColorPickerProvider","_ColorPickerWrapper","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerWrapper","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","useContext","ColorPickerContext","content","useMemo","createElement","StyledColorPickerWrapper","Popup","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","$shouldShowRoundPreviewColor","StyledColorPickerWrapperInfoColorBackground","StyledColorPickerWrapperInfoColor","$color","StyledColorPickerWrapperInfoText","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport ColorPickerPopup from '../../color-picker-popup/ColorPickerPopup';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledColorPickerWrapper,\n    StyledColorPickerWrapperInfo,\n    StyledColorPickerWrapperInfoColor,\n    StyledColorPickerWrapperInfoColorBackground,\n    StyledColorPickerWrapperInfoColorWrapper,\n    StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowAsPopup: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n}\n\nconst ColorPickerWrapper = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowAsPopup,\n    shouldShowTransparencySlider,\n    shouldShowMoreOptions,\n    shouldShowRoundPreviewColor,\n    shouldShowPreviewColorString,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopup\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content}>\n                    <StyledColorPickerWrapperInfo>\n                        <StyledColorPickerWrapperInfoColorWrapper\n                            $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                        >\n                            <StyledColorPickerWrapperInfoColorBackground />\n                            <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n                        </StyledColorPickerWrapperInfoColorWrapper>\n\n                        {shouldShowPreviewColorString && (\n                            <StyledColorPickerWrapperInfoText>\n                                {selectedColor}\n                            </StyledColorPickerWrapperInfoText>\n                        )}\n                    </StyledColorPickerWrapperInfo>\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorPickerWrapper.js","names":["_core","require","_react","_interopRequireWildcard","_ColorPickerPopup","_interopRequireDefault","_ColorPickerProvider","_ColorPickerWrapper","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerWrapper","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","useContext","ColorPickerContext","content","useMemo","createElement","StyledColorPickerWrapper","Popup","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","$shouldShowRoundPreviewColor","StyledColorPickerWrapperInfoColor","$color","StyledColorPickerWrapperInfoText","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport ColorPickerPopup from '../../color-picker-popup/ColorPickerPopup';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledColorPickerWrapper,\n    StyledColorPickerWrapperInfo,\n    StyledColorPickerWrapperInfoColor,\n    StyledColorPickerWrapperInfoColorWrapper,\n    StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowAsPopup: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n}\n\nconst ColorPickerWrapper = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowAsPopup,\n    shouldShowTransparencySlider,\n    shouldShowMoreOptions,\n    shouldShowRoundPreviewColor,\n    shouldShowPreviewColorString,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopup\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content}>\n                    <StyledColorPickerWrapperInfo>\n                        <StyledColorPickerWrapperInfoColorWrapper\n                            $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                        >\n                            <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n                        </StyledColorPickerWrapperInfoColorWrapper>\n\n                        {shouldShowPreviewColorString && (\n                            <StyledColorPickerWrapperInfoText>\n                                {selectedColor}\n                            </StyledColorPickerWrapperInfoText>\n                        )}\n                    </StyledColorPickerWrapperInfo>\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-picker-popup/color-area/ColorArea.js

@@ -20,6 +20,7 @@ const ColorArea = () => {
     updateIsPresetColor,
     isPresetColor,
     shouldGetCoordinates,
+    canGetColorFromArea,
     updateShouldGetCoordinates,
     updateShouldCallOnSelect,
     hueColor
@@ -111,8 +112,10 @@ const ColorArea = () => {
       }
       return;
     }
-    setColor();
-  }, [hueColor, setColor, updateIsPresetColor]);
+    if (canGetColorFromArea) {
+      setColor();
+    }
+  }, [canGetColorFromArea, hueColor, setColor, updateIsPresetColor]);
   const handleStartDrag = (0, _react.useCallback)(() => {
     if (typeof updateShouldGetCoordinates === 'function') {
       updateShouldGetCoordinates(false);

package/lib/cjs/components/color-picker-popup/color-area/ColorArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorArea.js","names":["_react","_interopRequireWildcard","require","_ColorArea","_colors","_chaynsApi","_framerMotion","_color","_ColorPickerProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorArea","selectedColor","updateSelectedColor","updateIsPresetColor","isPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","useContext","ColorPickerContext","opacity","setOpacity","useState","scale","setScale","scaleX","scaleY","isPresetColorRef","useRef","shouldGetCoordinatesRef","canDrag","canvasRef","pseudoRef","dragControls","useDragControls","x","useMotionValue","y","useEffect","current","extractRgbValues","canvas","rect","getBoundingClientRect","width","height","setColor","useCallback","xCord","yCord","color","getColorFromCoordinates","coordinates","_canvasRef$current","ctx","getContext","hsv","rgbToHsv","hex","hsvToHex","h","s","v","colorGradiant","createLinearGradient","addColorStop","fillStyle","fillRect","transparentGradiant","handleStartDrag","cords","getCoordinatesFromColor","tolerance","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","setRefreshScrollEnabled","move","xCords","yCords","newXCords","newYCords","handleMouseMove","handleTouchMove","preventDefault","changedTouches","pageX","pageY","window","addEventListener","removeEventListener","useMemo","createElement","StyledColorArea","StyledColorAreaCanvas","ref","StyledColorAreaPseudo","onPointerDown","onClick","StyledMotionColorAreaPointer","drag","dragConstraints","style","dragElastic","dragMomentum","onDrag","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.tsx"],"sourcesContent":["import React, {\n    MouseEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} 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        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        setColor();\n    }, [hueColor, setColor, updateIsPresetColor]);\n\n    const handleStartDrag = useCallback(() => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n\n        canDrag.current = true;\n    }, [updateShouldGetCoordinates]);\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: 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    useEffect(() => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        window.addEventListener('mousemove', handleMouseMove);\n        window.addEventListener('pointerup', handlePointerUp);\n        window.addEventListener('touchmove', handleTouchMove);\n        window.addEventListener('touchend', handlePointerUp);\n\n        return () => {\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            window.removeEventListener('mousemove', handleMouseMove);\n            window.removeEventListener('pointerup', handlePointerUp);\n            window.removeEventListener('touchmove', handleTouchMove);\n            window.removeEventListener('touchend', handlePointerUp);\n        };\n    }, [handleMouseMove, handlePointerUp, handleTouchMove]);\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":[]}
+{"version":3,"file":"ColorArea.js","names":["_react","_interopRequireWildcard","require","_ColorArea","_colors","_chaynsApi","_framerMotion","_color","_ColorPickerProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorArea","selectedColor","updateSelectedColor","updateIsPresetColor","isPresetColor","shouldGetCoordinates","canGetColorFromArea","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","useContext","ColorPickerContext","opacity","setOpacity","useState","scale","setScale","scaleX","scaleY","isPresetColorRef","useRef","shouldGetCoordinatesRef","canDrag","canvasRef","pseudoRef","dragControls","useDragControls","x","useMotionValue","y","useEffect","current","extractRgbValues","canvas","rect","getBoundingClientRect","width","height","setColor","useCallback","xCord","yCord","color","getColorFromCoordinates","coordinates","_canvasRef$current","ctx","getContext","hsv","rgbToHsv","hex","hsvToHex","h","s","v","colorGradiant","createLinearGradient","addColorStop","fillStyle","fillRect","transparentGradiant","handleStartDrag","cords","getCoordinatesFromColor","tolerance","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","setRefreshScrollEnabled","move","xCords","yCords","newXCords","newYCords","handleMouseMove","handleTouchMove","preventDefault","changedTouches","pageX","pageY","window","addEventListener","removeEventListener","useMemo","createElement","StyledColorArea","StyledColorAreaCanvas","ref","StyledColorAreaPseudo","onPointerDown","onClick","StyledMotionColorAreaPointer","drag","dragConstraints","style","dragElastic","dragMomentum","onDrag","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/color-area/ColorArea.tsx"],"sourcesContent":["import React, {\n    MouseEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} 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    const handleStartDrag = useCallback(() => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n\n        canDrag.current = true;\n    }, [updateShouldGetCoordinates]);\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: 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    useEffect(() => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        window.addEventListener('mousemove', handleMouseMove);\n        window.addEventListener('pointerup', handlePointerUp);\n        window.addEventListener('touchmove', handleTouchMove);\n        window.addEventListener('touchend', handlePointerUp);\n\n        return () => {\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            window.removeEventListener('mousemove', handleMouseMove);\n            window.removeEventListener('pointerup', handlePointerUp);\n            window.removeEventListener('touchmove', handleTouchMove);\n            window.removeEventListener('touchend', handlePointerUp);\n        };\n    }, [handleMouseMove, handlePointerUp, handleTouchMove]);\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":[]}

package/lib/cjs/components/color-picker-popup/sliders/Sliders.js

@@ -23,6 +23,7 @@ const Sliders = ({
     updateHueColor,
     updateShouldGetCoordinates,
     updateShouldCallOnSelect,
+    updateCanGetColorFromArea,
     hueColor
   } = (0, _react.useContext)(_ColorPickerProvider.ColorPickerContext);
   const handleColorChange = color => {
@@ -40,18 +41,27 @@ const Sliders = ({
       updateShouldGetCoordinates(false);
     }
   };
+  const handleHueStart = () => {
+    handleStart();
+    if (typeof updateCanGetColorFromArea === 'function') {
+      updateCanGetColorFromArea(true);
+    }
+  };
   const handleEnd = () => {
     if (typeof updateShouldGetCoordinates === 'function' && typeof updateShouldCallOnSelect === 'function') {
       updateShouldGetCoordinates(true);
       updateShouldCallOnSelect(true);
     }
+    if (typeof updateCanGetColorFromArea === 'function') {
+      updateCanGetColorFromArea(false);
+    }
   };
   const opacity = (0, _react.useMemo)(() => (0, _color.extractRgbValues)(selectedColor ?? '').a, [selectedColor]);
   return /*#__PURE__*/_react.default.createElement(_Sliders.StyledSliders, null, /*#__PURE__*/_react.default.createElement(_Sliders.StyledSlidersWrapper, null, /*#__PURE__*/_react.default.createElement(_HueSlider.default, {
     color: hueColor,
     opacity: opacity,
     onEnd: handleEnd,
-    onStart: handleStart,
+    onStart: handleHueStart,
     onChange: handleHueColorChange
   }), shouldShowTransparencySlider && /*#__PURE__*/_react.default.createElement(_TransparencySlider.default, {
     color: selectedColor,

package/lib/cjs/components/color-picker-popup/sliders/Sliders.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sliders.js","names":["_react","_interopRequireWildcard","require","_color","_ColorPickerProvider","_HueSlider","_interopRequireDefault","_TransparencySlider","_ColorPreview","_Sliders","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Sliders","shouldShowTransparencySlider","selectedColor","updateSelectedColor","updateHueColor","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","useContext","ColorPickerContext","handleColorChange","color","handleHueColorChange","handleStart","handleEnd","opacity","useMemo","extractRgbValues","createElement","StyledSliders","StyledSlidersWrapper","onEnd","onStart","onChange","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/sliders/Sliders.tsx"],"sourcesContent":["import React, { useContext, useMemo, type CSSProperties } from 'react';\nimport { extractRgbValues } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport HueSlider from '../../hue-slider/HueSlider';\nimport TransparencySlider from '../../transparency-slider/TransparencySlider';\nimport ColorPreview from './color-preview/ColorPreview';\nimport { StyledSliders, StyledSlidersWrapper } from './Sliders.styles';\n\ninterface SlidersProps {\n    shouldShowTransparencySlider: boolean;\n}\n\nconst Sliders = ({ shouldShowTransparencySlider }: SlidersProps) => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateHueColor,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const handleColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateSelectedColor === 'function' && color) {\n            updateSelectedColor(color);\n        }\n    };\n\n    const handleHueColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateHueColor === 'function' && color) {\n            updateHueColor(color);\n        }\n    };\n\n    const handleStart = () => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n    };\n\n    const handleEnd = () => {\n        if (\n            typeof updateShouldGetCoordinates === 'function' &&\n            typeof updateShouldCallOnSelect === 'function'\n        ) {\n            updateShouldGetCoordinates(true);\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const opacity = useMemo(() => extractRgbValues(selectedColor ?? '').a, [selectedColor]);\n\n    return (\n        <StyledSliders>\n            <StyledSlidersWrapper>\n                <HueSlider\n                    color={hueColor}\n                    opacity={opacity}\n                    onEnd={handleEnd}\n                    onStart={handleStart}\n                    onChange={handleHueColorChange}\n                />\n                {shouldShowTransparencySlider && (\n                    <TransparencySlider\n                        color={selectedColor}\n                        onEnd={handleEnd}\n                        onStart={handleStart}\n                        onChange={handleColorChange}\n                    />\n                )}\n            </StyledSlidersWrapper>\n            <ColorPreview />\n        </StyledSliders>\n    );\n};\n\nSliders.displayName = 'Sliders';\n\nexport default Sliders;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Sliders.js","names":["_react","_interopRequireWildcard","require","_color","_ColorPickerProvider","_HueSlider","_interopRequireDefault","_TransparencySlider","_ColorPreview","_Sliders","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Sliders","shouldShowTransparencySlider","selectedColor","updateSelectedColor","updateHueColor","updateShouldGetCoordinates","updateShouldCallOnSelect","updateCanGetColorFromArea","hueColor","useContext","ColorPickerContext","handleColorChange","color","handleHueColorChange","handleStart","handleHueStart","handleEnd","opacity","useMemo","extractRgbValues","createElement","StyledSliders","StyledSlidersWrapper","onEnd","onStart","onChange","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/sliders/Sliders.tsx"],"sourcesContent":["import React, { useContext, useMemo, type CSSProperties } from 'react';\nimport { extractRgbValues } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport HueSlider from '../../hue-slider/HueSlider';\nimport TransparencySlider from '../../transparency-slider/TransparencySlider';\nimport ColorPreview from './color-preview/ColorPreview';\nimport { StyledSliders, StyledSlidersWrapper } from './Sliders.styles';\n\ninterface SlidersProps {\n    shouldShowTransparencySlider: boolean;\n}\n\nconst Sliders = ({ shouldShowTransparencySlider }: SlidersProps) => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateHueColor,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        updateCanGetColorFromArea,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const handleColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateSelectedColor === 'function' && color) {\n            updateSelectedColor(color);\n        }\n    };\n\n    const handleHueColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateHueColor === 'function' && color) {\n            updateHueColor(color);\n        }\n    };\n\n    const handleStart = () => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n    };\n\n    const handleHueStart = () => {\n        handleStart();\n\n        if (typeof updateCanGetColorFromArea === 'function') {\n            updateCanGetColorFromArea(true);\n        }\n    };\n\n    const handleEnd = () => {\n        if (\n            typeof updateShouldGetCoordinates === 'function' &&\n            typeof updateShouldCallOnSelect === 'function'\n        ) {\n            updateShouldGetCoordinates(true);\n            updateShouldCallOnSelect(true);\n        }\n\n        if (typeof updateCanGetColorFromArea === 'function') {\n            updateCanGetColorFromArea(false);\n        }\n    };\n\n    const opacity = useMemo(() => extractRgbValues(selectedColor ?? '').a, [selectedColor]);\n\n    return (\n        <StyledSliders>\n            <StyledSlidersWrapper>\n                <HueSlider\n                    color={hueColor}\n                    opacity={opacity}\n                    onEnd={handleEnd}\n                    onStart={handleHueStart}\n                    onChange={handleHueColorChange}\n                />\n                {shouldShowTransparencySlider && (\n                    <TransparencySlider\n                        color={selectedColor}\n                        onEnd={handleEnd}\n                        onStart={handleStart}\n                        onChange={handleColorChange}\n                    />\n                )}\n            </StyledSlidersWrapper>\n            <ColorPreview />\n        </StyledSliders>\n    );\n};\n\nSliders.displayName = 'Sliders';\n\nexport default Sliders;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/ColorPickerProvider.js

@@ -10,7 +10,9 @@ export const ColorPickerContext = /*#__PURE__*/React.createContext({
   shouldGetCoordinates: undefined,
   updateShouldGetCoordinates: undefined,
   shouldCallOnSelect: undefined,
-  updateShouldCallOnSelect: undefined
+  updateShouldCallOnSelect: undefined,
+  canGetColorFromArea: undefined,
+  updateCanGetColorFromArea: undefined
 });
 ColorPickerContext.displayName = 'ColorPickerContext';
 const ColorPickerProvider = _ref => {
@@ -24,6 +26,7 @@ const ColorPickerProvider = _ref => {
   const [internalIsPresetColor, setInternalIsPresetColor] = useState(false);
   const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState(true);
   const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState(false);
+  const [internalCanGetColorFromArea, setInternalCanGetColorFromArea] = useState(false);
   const updateSelectedColor = useCallback(color => {
     setInternalSelectedColor(color);
   }, []);
@@ -39,6 +42,9 @@ const ColorPickerProvider = _ref => {
   const updateShouldCallOnSelect = useCallback(shouldCallOnSelect => {
     setInternalShouldCallOnSelect(shouldCallOnSelect);
   }, []);
+  const updateCanGetColorFromArea = useCallback(canGetColorFromArea => {
+    setInternalCanGetColorFromArea(canGetColorFromArea);
+  }, []);
   useEffect(() => {
     let newColor = selectedColor;
     if (newColor && !isValidRGBA(newColor)) {
@@ -70,8 +76,10 @@ const ColorPickerProvider = _ref => {
     shouldGetCoordinates: internalShouldGetCoordinates,
     updateShouldGetCoordinates,
     shouldCallOnSelect: internalShouldCallOnSelect,
-    updateShouldCallOnSelect
-  }), [internalHueColor, internalIsPresetColor, internalSelectedColor, internalShouldCallOnSelect, internalShouldGetCoordinates, updateHueColor, updateIsPresetColor, updateSelectedColor, updateShouldCallOnSelect, updateShouldGetCoordinates]);
+    updateShouldCallOnSelect,
+    canGetColorFromArea: internalCanGetColorFromArea,
+    updateCanGetColorFromArea
+  }), [internalCanGetColorFromArea, internalHueColor, internalIsPresetColor, internalSelectedColor, internalShouldCallOnSelect, internalShouldGetCoordinates, updateCanGetColorFromArea, updateHueColor, updateIsPresetColor, updateSelectedColor, updateShouldCallOnSelect, updateShouldGetCoordinates]);
   return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
     value: providerValue
   }, children);

package/lib/esm/components/ColorPickerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerProvider.js","names":["React","useCallback","useEffect","useMemo","useState","hexToRgb","isValidRGBA","ColorPickerContext","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","displayName","ColorPickerProvider","_ref","children","onSelect","internalSelectedColor","setInternalSelectedColor","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","color","newColor","r","g","b","a","providerValue","createElement","Provider","value"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { hexToRgb, isValidRGBA } from '../utils/color';\n\ninterface IColorPickerContext {\n    selectedColor?: string;\n    updateSelectedColor?: (color: string | undefined) => void;\n    hueColor?: string;\n    updateHueColor?: (color: string | undefined) => void;\n    isPresetColor?: boolean;\n    updateIsPresetColor?: (isPresetColor: boolean) => void;\n    shouldGetCoordinates?: boolean;\n    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n    shouldCallOnSelect?: boolean;\n    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n    selectedColor: undefined,\n    updateSelectedColor: undefined,\n    hueColor: undefined,\n    updateHueColor: undefined,\n    isPresetColor: undefined,\n    updateIsPresetColor: undefined,\n    shouldGetCoordinates: undefined,\n    updateShouldGetCoordinates: undefined,\n    shouldCallOnSelect: undefined,\n    updateShouldCallOnSelect: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n    /**\n     * The children of the provider.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n    const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n    const [internalHueColor, setInternalHueColor] = useState<string>();\n    const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n    const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n    const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n\n    const updateSelectedColor = useCallback((color: string | undefined) => {\n        setInternalSelectedColor(color);\n    }, []);\n\n    const updateHueColor = useCallback((color: string | undefined) => {\n        setInternalHueColor(color);\n    }, []);\n\n    const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n        setInternalIsPresetColor(isPresetColor);\n    }, []);\n\n    const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n        setInternalShouldGetCoordinates(shouldGetCoordinates);\n    }, []);\n\n    const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n        setInternalShouldCallOnSelect(shouldCallOnSelect);\n    }, []);\n\n    useEffect(() => {\n        let newColor = selectedColor;\n\n        if (newColor && !isValidRGBA(newColor)) {\n            const { r, g, b, a } = hexToRgb(newColor);\n\n            newColor = `rgba(${r},${g},${b},${a})`;\n        }\n\n        setInternalSelectedColor(newColor);\n        setInternalHueColor(newColor);\n        setInternalIsPresetColor(true);\n    }, [selectedColor]);\n\n    useEffect(() => {\n        if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n            onSelect(internalSelectedColor);\n\n            setInternalShouldCallOnSelect(false);\n        }\n    }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n    const providerValue = useMemo<IColorPickerContext>(\n        () => ({\n            selectedColor: internalSelectedColor,\n            updateSelectedColor,\n            hueColor: internalHueColor,\n            updateHueColor,\n            isPresetColor: internalIsPresetColor,\n            updateIsPresetColor,\n            shouldGetCoordinates: internalShouldGetCoordinates,\n            updateShouldGetCoordinates,\n            shouldCallOnSelect: internalShouldCallOnSelect,\n            updateShouldCallOnSelect,\n        }),\n        [\n            internalHueColor,\n            internalIsPresetColor,\n            internalSelectedColor,\n            internalShouldCallOnSelect,\n            internalShouldGetCoordinates,\n            updateHueColor,\n            updateIsPresetColor,\n            updateSelectedColor,\n            updateShouldCallOnSelect,\n            updateShouldGetCoordinates,\n        ],\n    );\n\n    return (\n        <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n    );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorPickerProvider.js","names":["React","useCallback","useEffect","useMemo","useState","hexToRgb","isValidRGBA","ColorPickerContext","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","canGetColorFromArea","updateCanGetColorFromArea","displayName","ColorPickerProvider","_ref","children","onSelect","internalSelectedColor","setInternalSelectedColor","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","internalCanGetColorFromArea","setInternalCanGetColorFromArea","color","newColor","r","g","b","a","providerValue","createElement","Provider","value"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { hexToRgb, isValidRGBA } from '../utils/color';\n\ninterface IColorPickerContext {\n    selectedColor?: string;\n    updateSelectedColor?: (color: string | undefined) => void;\n    hueColor?: string;\n    updateHueColor?: (color: string | undefined) => void;\n    isPresetColor?: boolean;\n    updateIsPresetColor?: (isPresetColor: boolean) => void;\n    shouldGetCoordinates?: boolean;\n    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n    shouldCallOnSelect?: boolean;\n    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n    canGetColorFromArea?: boolean;\n    updateCanGetColorFromArea?: (canGetColorFromArea: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n    selectedColor: undefined,\n    updateSelectedColor: undefined,\n    hueColor: undefined,\n    updateHueColor: undefined,\n    isPresetColor: undefined,\n    updateIsPresetColor: undefined,\n    shouldGetCoordinates: undefined,\n    updateShouldGetCoordinates: undefined,\n    shouldCallOnSelect: undefined,\n    updateShouldCallOnSelect: undefined,\n    canGetColorFromArea: undefined,\n    updateCanGetColorFromArea: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n    /**\n     * The children of the provider.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n    const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n    const [internalHueColor, setInternalHueColor] = useState<string>();\n    const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n    const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n    const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n    const [internalCanGetColorFromArea, setInternalCanGetColorFromArea] = useState<boolean>(false);\n\n    const updateSelectedColor = useCallback((color: string | undefined) => {\n        setInternalSelectedColor(color);\n    }, []);\n\n    const updateHueColor = useCallback((color: string | undefined) => {\n        setInternalHueColor(color);\n    }, []);\n\n    const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n        setInternalIsPresetColor(isPresetColor);\n    }, []);\n\n    const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n        setInternalShouldGetCoordinates(shouldGetCoordinates);\n    }, []);\n\n    const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n        setInternalShouldCallOnSelect(shouldCallOnSelect);\n    }, []);\n\n    const updateCanGetColorFromArea = useCallback((canGetColorFromArea: boolean) => {\n        setInternalCanGetColorFromArea(canGetColorFromArea);\n    }, []);\n\n    useEffect(() => {\n        let newColor = selectedColor;\n\n        if (newColor && !isValidRGBA(newColor)) {\n            const { r, g, b, a } = hexToRgb(newColor);\n\n            newColor = `rgba(${r},${g},${b},${a})`;\n        }\n\n        setInternalSelectedColor(newColor);\n        setInternalHueColor(newColor);\n        setInternalIsPresetColor(true);\n    }, [selectedColor]);\n\n    useEffect(() => {\n        if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n            onSelect(internalSelectedColor);\n\n            setInternalShouldCallOnSelect(false);\n        }\n    }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n    const providerValue = useMemo<IColorPickerContext>(\n        () => ({\n            selectedColor: internalSelectedColor,\n            updateSelectedColor,\n            hueColor: internalHueColor,\n            updateHueColor,\n            isPresetColor: internalIsPresetColor,\n            updateIsPresetColor,\n            shouldGetCoordinates: internalShouldGetCoordinates,\n            updateShouldGetCoordinates,\n            shouldCallOnSelect: internalShouldCallOnSelect,\n            updateShouldCallOnSelect,\n            canGetColorFromArea: internalCanGetColorFromArea,\n            updateCanGetColorFromArea,\n        }),\n        [\n            internalCanGetColorFromArea,\n            internalHueColor,\n            internalIsPresetColor,\n            internalSelectedColor,\n            internalShouldCallOnSelect,\n            internalShouldGetCoordinates,\n            updateCanGetColorFromArea,\n            updateHueColor,\n            updateIsPresetColor,\n            updateSelectedColor,\n            updateShouldCallOnSelect,\n            updateShouldGetCoordinates,\n        ],\n    );\n\n    return (\n        <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n    );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js

@@ -2,7 +2,7 @@ import { Popup } from '@chayns-components/core';
 import React, { useContext, useMemo } from 'react';
 import ColorPickerPopup from '../../color-picker-popup/ColorPickerPopup';
 import { ColorPickerContext } from '../../ColorPickerProvider';
-import { StyledColorPickerWrapper, StyledColorPickerWrapperInfo, StyledColorPickerWrapperInfoColor, StyledColorPickerWrapperInfoColorBackground, StyledColorPickerWrapperInfoColorWrapper, StyledColorPickerWrapperInfoText } from './ColorPickerWrapper.styles';
+import { StyledColorPickerWrapper, StyledColorPickerWrapperInfo, StyledColorPickerWrapperInfoColor, StyledColorPickerWrapperInfoColorWrapper, StyledColorPickerWrapperInfoText } from './ColorPickerWrapper.styles';
 const ColorPickerWrapper = _ref => {
   let {
     presetColors,
@@ -30,7 +30,7 @@ const ColorPickerWrapper = _ref => {
     content: content
   }, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfo, null, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColorWrapper, {
     $shouldShowRoundPreviewColor: shouldShowRoundPreviewColor
-  }, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColorBackground, null), /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColor, {
+  }, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColor, {
     $color: selectedColor
   })), shouldShowPreviewColorString && /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoText, null, selectedColor))) : content);
 };

package/lib/esm/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerWrapper.js","names":["Popup","React","useContext","useMemo","ColorPickerPopup","ColorPickerContext","StyledColorPickerWrapper","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","StyledColorPickerWrapperInfoColorBackground","StyledColorPickerWrapperInfoColorWrapper","StyledColorPickerWrapperInfoText","ColorPickerWrapper","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","content","createElement","$shouldShowRoundPreviewColor","$color","displayName"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport ColorPickerPopup from '../../color-picker-popup/ColorPickerPopup';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledColorPickerWrapper,\n    StyledColorPickerWrapperInfo,\n    StyledColorPickerWrapperInfoColor,\n    StyledColorPickerWrapperInfoColorBackground,\n    StyledColorPickerWrapperInfoColorWrapper,\n    StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowAsPopup: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n}\n\nconst ColorPickerWrapper = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowAsPopup,\n    shouldShowTransparencySlider,\n    shouldShowMoreOptions,\n    shouldShowRoundPreviewColor,\n    shouldShowPreviewColorString,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopup\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content}>\n                    <StyledColorPickerWrapperInfo>\n                        <StyledColorPickerWrapperInfoColorWrapper\n                            $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                        >\n                            <StyledColorPickerWrapperInfoColorBackground />\n                            <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n                        </StyledColorPickerWrapperInfoColorWrapper>\n\n                        {shouldShowPreviewColorString && (\n                            <StyledColorPickerWrapperInfoText>\n                                {selectedColor}\n                            </StyledColorPickerWrapperInfoText>\n                        )}\n                    </StyledColorPickerWrapperInfo>\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAElD,OAAOC,gBAAgB,MAAM,2CAA2C;AACxE,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SACIC,wBAAwB,EACxBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,2CAA2C,EAC3CC,wCAAwC,EACxCC,gCAAgC,QAC7B,6BAA6B;AAcpC,MAAMC,kBAAkB,GAAGC,IAAA,IAUI;EAAA,IAVH;IACxBC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC,sBAAsB;IACtBC,iBAAiB;IACjBC,4BAA4B;IAC5BC,qBAAqB;IACrBC,2BAA2B;IAC3BC;EACqB,CAAC,GAAAT,IAAA;EACtB,MAAM;IAAEU;EAAc,CAAC,GAAGrB,UAAU,CAACG,kBAAkB,CAAC;EAExD,MAAMmB,OAAO,GAAGrB,OAAO,CACnB,mBACIF,KAAA,CAAAwB,aAAA,CAACrB,gBAAgB;IACba,sBAAsB,EAAEA,sBAAuB;IAC/CF,mBAAmB,EAAEA,mBAAoB;IACzCC,gBAAgB,EAAEA,gBAAiB;IACnCF,YAAY,EAAEA,YAAa;IAC3BM,qBAAqB,EAAEA,qBAAsB;IAC7CD,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACD,CACIH,gBAAgB,EAChBD,mBAAmB,EACnBD,YAAY,EACZM,qBAAqB,EACrBH,sBAAsB,EACtBE,4BAA4B,CAEpC,CAAC;EAED,oBACIlB,KAAA,CAAAwB,aAAA,CAACnB,wBAAwB,QACpBY,iBAAiB,gBACdjB,KAAA,CAAAwB,aAAA,CAACzB,KAAK;IAACwB,OAAO,EAAEA;EAAQ,gBACpBvB,KAAA,CAAAwB,aAAA,CAAClB,4BAA4B,qBACzBN,KAAA,CAAAwB,aAAA,CAACf,wCAAwC;IACrCgB,4BAA4B,EAAEL;EAA4B,gBAE1DpB,KAAA,CAAAwB,aAAA,CAAChB,2CAA2C,MAAE,CAAC,eAC/CR,KAAA,CAAAwB,aAAA,CAACjB,iCAAiC;IAACmB,MAAM,EAAEJ;EAAc,CAAE,CACrB,CAAC,EAE1CD,4BAA4B,iBACzBrB,KAAA,CAAAwB,aAAA,CAACd,gCAAgC,QAC5BY,aAC6B,CAEZ,CAC3B,CAAC,GAERC,OAEkB,CAAC;AAEnC,CAAC;AAEDZ,kBAAkB,CAACgB,WAAW,GAAG,oBAAoB;AAErD,eAAehB,kBAAkB","ignoreList":[]}
+{"version":3,"file":"ColorPickerWrapper.js","names":["Popup","React","useContext","useMemo","ColorPickerPopup","ColorPickerContext","StyledColorPickerWrapper","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","StyledColorPickerWrapperInfoColorWrapper","StyledColorPickerWrapperInfoText","ColorPickerWrapper","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","content","createElement","$shouldShowRoundPreviewColor","$color","displayName"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport ColorPickerPopup from '../../color-picker-popup/ColorPickerPopup';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledColorPickerWrapper,\n    StyledColorPickerWrapperInfo,\n    StyledColorPickerWrapperInfoColor,\n    StyledColorPickerWrapperInfoColorWrapper,\n    StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowAsPopup: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n}\n\nconst ColorPickerWrapper = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowAsPopup,\n    shouldShowTransparencySlider,\n    shouldShowMoreOptions,\n    shouldShowRoundPreviewColor,\n    shouldShowPreviewColorString,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopup\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content}>\n                    <StyledColorPickerWrapperInfo>\n                        <StyledColorPickerWrapperInfoColorWrapper\n                            $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                        >\n                            <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n                        </StyledColorPickerWrapperInfoColorWrapper>\n\n                        {shouldShowPreviewColorString && (\n                            <StyledColorPickerWrapperInfoText>\n                                {selectedColor}\n                            </StyledColorPickerWrapperInfoText>\n                        )}\n                    </StyledColorPickerWrapperInfo>\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAElD,OAAOC,gBAAgB,MAAM,2CAA2C;AACxE,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SACIC,wBAAwB,EACxBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,wCAAwC,EACxCC,gCAAgC,QAC7B,6BAA6B;AAcpC,MAAMC,kBAAkB,GAAGC,IAAA,IAUI;EAAA,IAVH;IACxBC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC,sBAAsB;IACtBC,iBAAiB;IACjBC,4BAA4B;IAC5BC,qBAAqB;IACrBC,2BAA2B;IAC3BC;EACqB,CAAC,GAAAT,IAAA;EACtB,MAAM;IAAEU;EAAc,CAAC,GAAGpB,UAAU,CAACG,kBAAkB,CAAC;EAExD,MAAMkB,OAAO,GAAGpB,OAAO,CACnB,mBACIF,KAAA,CAAAuB,aAAA,CAACpB,gBAAgB;IACbY,sBAAsB,EAAEA,sBAAuB;IAC/CF,mBAAmB,EAAEA,mBAAoB;IACzCC,gBAAgB,EAAEA,gBAAiB;IACnCF,YAAY,EAAEA,YAAa;IAC3BM,qBAAqB,EAAEA,qBAAsB;IAC7CD,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACD,CACIH,gBAAgB,EAChBD,mBAAmB,EACnBD,YAAY,EACZM,qBAAqB,EACrBH,sBAAsB,EACtBE,4BAA4B,CAEpC,CAAC;EAED,oBACIjB,KAAA,CAAAuB,aAAA,CAAClB,wBAAwB,QACpBW,iBAAiB,gBACdhB,KAAA,CAAAuB,aAAA,CAACxB,KAAK;IAACuB,OAAO,EAAEA;EAAQ,gBACpBtB,KAAA,CAAAuB,aAAA,CAACjB,4BAA4B,qBACzBN,KAAA,CAAAuB,aAAA,CAACf,wCAAwC;IACrCgB,4BAA4B,EAAEL;EAA4B,gBAE1DnB,KAAA,CAAAuB,aAAA,CAAChB,iCAAiC;IAACkB,MAAM,EAAEJ;EAAc,CAAE,CACrB,CAAC,EAE1CD,4BAA4B,iBACzBpB,KAAA,CAAAuB,aAAA,CAACd,gCAAgC,QAC5BY,aAC6B,CAEZ,CAC3B,CAAC,GAERC,OAEkB,CAAC;AAEnC,CAAC;AAEDZ,kBAAkB,CAACgB,WAAW,GAAG,oBAAoB;AAErD,eAAehB,kBAAkB","ignoreList":[]}

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

@@ -12,6 +12,7 @@ const ColorArea = () => {
     updateIsPresetColor,
     isPresetColor,
     shouldGetCoordinates,
+    canGetColorFromArea,
     updateShouldGetCoordinates,
     updateShouldCallOnSelect,
     hueColor
@@ -102,8 +103,10 @@ const ColorArea = () => {
       }
       return;
     }
-    setColor();
-  }, [hueColor, setColor, updateIsPresetColor]);
+    if (canGetColorFromArea) {
+      setColor();
+    }
+  }, [canGetColorFromArea, hueColor, setColor, updateIsPresetColor]);
   const handleStartDrag = useCallback(() => {
     if (typeof updateShouldGetCoordinates === 'function') {
       updateShouldGetCoordinates(false);

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

@@ -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","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","handleStartDrag","cords","tolerance","set","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","move","xCords","yCords","newXCords","newYCords","handleMouseMove","handleTouchMove","preventDefault","changedTouches","pageX","pageY","window","addEventListener","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, {\n    MouseEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} 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        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        setColor();\n    }, [hueColor, setColor, updateIsPresetColor]);\n\n    const handleStartDrag = useCallback(() => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n\n        canDrag.current = true;\n    }, [updateShouldGetCoordinates]);\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: 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    useEffect(() => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        window.addEventListener('mousemove', handleMouseMove);\n        window.addEventListener('pointerup', handlePointerUp);\n        window.addEventListener('touchmove', handleTouchMove);\n        window.addEventListener('touchend', handlePointerUp);\n\n        return () => {\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            window.removeEventListener('mousemove', handleMouseMove);\n            window.removeEventListener('pointerup', handlePointerUp);\n            window.removeEventListener('touchmove', handleTouchMove);\n            window.removeEventListener('touchend', handlePointerUp);\n        };\n    }, [handleMouseMove, handlePointerUp, handleTouchMove]);\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":[]}
+{"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","handleStartDrag","cords","tolerance","set","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","move","xCords","yCords","newXCords","newYCords","handleMouseMove","handleTouchMove","preventDefault","changedTouches","pageX","pageY","window","addEventListener","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, {\n    MouseEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} 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    const handleStartDrag = useCallback(() => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n\n        canDrag.current = true;\n    }, [updateShouldGetCoordinates]);\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: 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    useEffect(() => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        window.addEventListener('mousemove', handleMouseMove);\n        window.addEventListener('pointerup', handlePointerUp);\n        window.addEventListener('touchmove', handleTouchMove);\n        window.addEventListener('touchend', handlePointerUp);\n\n        return () => {\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            window.removeEventListener('mousemove', handleMouseMove);\n            window.removeEventListener('pointerup', handlePointerUp);\n            window.removeEventListener('touchmove', handleTouchMove);\n            window.removeEventListener('touchend', handlePointerUp);\n        };\n    }, [handleMouseMove, handlePointerUp, handleTouchMove]);\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":[]}

package/lib/esm/components/color-picker-popup/sliders/Sliders.js

@@ -15,6 +15,7 @@ const Sliders = _ref => {
     updateHueColor,
     updateShouldGetCoordinates,
     updateShouldCallOnSelect,
+    updateCanGetColorFromArea,
     hueColor
   } = useContext(ColorPickerContext);
   const handleColorChange = color => {
@@ -32,18 +33,27 @@ const Sliders = _ref => {
       updateShouldGetCoordinates(false);
     }
   };
+  const handleHueStart = () => {
+    handleStart();
+    if (typeof updateCanGetColorFromArea === 'function') {
+      updateCanGetColorFromArea(true);
+    }
+  };
   const handleEnd = () => {
     if (typeof updateShouldGetCoordinates === 'function' && typeof updateShouldCallOnSelect === 'function') {
       updateShouldGetCoordinates(true);
       updateShouldCallOnSelect(true);
     }
+    if (typeof updateCanGetColorFromArea === 'function') {
+      updateCanGetColorFromArea(false);
+    }
   };
   const opacity = useMemo(() => extractRgbValues(selectedColor ?? '').a, [selectedColor]);
   return /*#__PURE__*/React.createElement(StyledSliders, null, /*#__PURE__*/React.createElement(StyledSlidersWrapper, null, /*#__PURE__*/React.createElement(HueSlider, {
     color: hueColor,
     opacity: opacity,
     onEnd: handleEnd,
-    onStart: handleStart,
+    onStart: handleHueStart,
     onChange: handleHueColorChange
   }), shouldShowTransparencySlider && /*#__PURE__*/React.createElement(TransparencySlider, {
     color: selectedColor,

package/lib/esm/components/color-picker-popup/sliders/Sliders.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sliders.js","names":["React","useContext","useMemo","extractRgbValues","ColorPickerContext","HueSlider","TransparencySlider","ColorPreview","StyledSliders","StyledSlidersWrapper","Sliders","_ref","shouldShowTransparencySlider","selectedColor","updateSelectedColor","updateHueColor","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","handleColorChange","color","handleHueColorChange","handleStart","handleEnd","opacity","a","createElement","onEnd","onStart","onChange","displayName"],"sources":["../../../../../src/components/color-picker-popup/sliders/Sliders.tsx"],"sourcesContent":["import React, { useContext, useMemo, type CSSProperties } from 'react';\nimport { extractRgbValues } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport HueSlider from '../../hue-slider/HueSlider';\nimport TransparencySlider from '../../transparency-slider/TransparencySlider';\nimport ColorPreview from './color-preview/ColorPreview';\nimport { StyledSliders, StyledSlidersWrapper } from './Sliders.styles';\n\ninterface SlidersProps {\n    shouldShowTransparencySlider: boolean;\n}\n\nconst Sliders = ({ shouldShowTransparencySlider }: SlidersProps) => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateHueColor,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const handleColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateSelectedColor === 'function' && color) {\n            updateSelectedColor(color);\n        }\n    };\n\n    const handleHueColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateHueColor === 'function' && color) {\n            updateHueColor(color);\n        }\n    };\n\n    const handleStart = () => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n    };\n\n    const handleEnd = () => {\n        if (\n            typeof updateShouldGetCoordinates === 'function' &&\n            typeof updateShouldCallOnSelect === 'function'\n        ) {\n            updateShouldGetCoordinates(true);\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const opacity = useMemo(() => extractRgbValues(selectedColor ?? '').a, [selectedColor]);\n\n    return (\n        <StyledSliders>\n            <StyledSlidersWrapper>\n                <HueSlider\n                    color={hueColor}\n                    opacity={opacity}\n                    onEnd={handleEnd}\n                    onStart={handleStart}\n                    onChange={handleHueColorChange}\n                />\n                {shouldShowTransparencySlider && (\n                    <TransparencySlider\n                        color={selectedColor}\n                        onEnd={handleEnd}\n                        onStart={handleStart}\n                        onChange={handleColorChange}\n                    />\n                )}\n            </StyledSlidersWrapper>\n            <ColorPreview />\n        </StyledSliders>\n    );\n};\n\nSliders.displayName = 'Sliders';\n\nexport default Sliders;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAA4B,OAAO;AACtE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,SAAS,MAAM,4BAA4B;AAClD,OAAOC,kBAAkB,MAAM,8CAA8C;AAC7E,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SAASC,aAAa,EAAEC,oBAAoB,QAAQ,kBAAkB;AAMtE,MAAMC,OAAO,GAAGC,IAAA,IAAoD;EAAA,IAAnD;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAC3D,MAAM;IACFE,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,0BAA0B;IAC1BC,wBAAwB;IACxBC;EACJ,CAAC,GAAGjB,UAAU,CAACG,kBAAkB,CAAC;EAElC,MAAMe,iBAAiB,GAAIC,KAA6B,IAAK;IACzD,IAAI,OAAON,mBAAmB,KAAK,UAAU,IAAIM,KAAK,EAAE;MACpDN,mBAAmB,CAACM,KAAK,CAAC;IAC9B;EACJ,CAAC;EAED,MAAMC,oBAAoB,GAAID,KAA6B,IAAK;IAC5D,IAAI,OAAOL,cAAc,KAAK,UAAU,IAAIK,KAAK,EAAE;MAC/CL,cAAc,CAACK,KAAK,CAAC;IACzB;EACJ,CAAC;EAED,MAAME,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAON,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAAC,KAAK,CAAC;IACrC;EACJ,CAAC;EAED,MAAMO,SAAS,GAAGA,CAAA,KAAM;IACpB,IACI,OAAOP,0BAA0B,KAAK,UAAU,IAChD,OAAOC,wBAAwB,KAAK,UAAU,EAChD;MACED,0BAA0B,CAAC,IAAI,CAAC;MAChCC,wBAAwB,CAAC,IAAI,CAAC;IAClC;EACJ,CAAC;EAED,MAAMO,OAAO,GAAGtB,OAAO,CAAC,MAAMC,gBAAgB,CAACU,aAAa,IAAI,EAAE,CAAC,CAACY,CAAC,EAAE,CAACZ,aAAa,CAAC,CAAC;EAEvF,oBACIb,KAAA,CAAA0B,aAAA,CAAClB,aAAa,qBACVR,KAAA,CAAA0B,aAAA,CAACjB,oBAAoB,qBACjBT,KAAA,CAAA0B,aAAA,CAACrB,SAAS;IACNe,KAAK,EAAEF,QAAS;IAChBM,OAAO,EAAEA,OAAQ;IACjBG,KAAK,EAAEJ,SAAU;IACjBK,OAAO,EAAEN,WAAY;IACrBO,QAAQ,EAAER;EAAqB,CAClC,CAAC,EACDT,4BAA4B,iBACzBZ,KAAA,CAAA0B,aAAA,CAACpB,kBAAkB;IACfc,KAAK,EAAEP,aAAc;IACrBc,KAAK,EAAEJ,SAAU;IACjBK,OAAO,EAAEN,WAAY;IACrBO,QAAQ,EAAEV;EAAkB,CAC/B,CAEa,CAAC,eACvBnB,KAAA,CAAA0B,aAAA,CAACnB,YAAY,MAAE,CACJ,CAAC;AAExB,CAAC;AAEDG,OAAO,CAACoB,WAAW,GAAG,SAAS;AAE/B,eAAepB,OAAO","ignoreList":[]}
+{"version":3,"file":"Sliders.js","names":["React","useContext","useMemo","extractRgbValues","ColorPickerContext","HueSlider","TransparencySlider","ColorPreview","StyledSliders","StyledSlidersWrapper","Sliders","_ref","shouldShowTransparencySlider","selectedColor","updateSelectedColor","updateHueColor","updateShouldGetCoordinates","updateShouldCallOnSelect","updateCanGetColorFromArea","hueColor","handleColorChange","color","handleHueColorChange","handleStart","handleHueStart","handleEnd","opacity","a","createElement","onEnd","onStart","onChange","displayName"],"sources":["../../../../../src/components/color-picker-popup/sliders/Sliders.tsx"],"sourcesContent":["import React, { useContext, useMemo, type CSSProperties } from 'react';\nimport { extractRgbValues } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport HueSlider from '../../hue-slider/HueSlider';\nimport TransparencySlider from '../../transparency-slider/TransparencySlider';\nimport ColorPreview from './color-preview/ColorPreview';\nimport { StyledSliders, StyledSlidersWrapper } from './Sliders.styles';\n\ninterface SlidersProps {\n    shouldShowTransparencySlider: boolean;\n}\n\nconst Sliders = ({ shouldShowTransparencySlider }: SlidersProps) => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateHueColor,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        updateCanGetColorFromArea,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const handleColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateSelectedColor === 'function' && color) {\n            updateSelectedColor(color);\n        }\n    };\n\n    const handleHueColorChange = (color: CSSProperties['color']) => {\n        if (typeof updateHueColor === 'function' && color) {\n            updateHueColor(color);\n        }\n    };\n\n    const handleStart = () => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n    };\n\n    const handleHueStart = () => {\n        handleStart();\n\n        if (typeof updateCanGetColorFromArea === 'function') {\n            updateCanGetColorFromArea(true);\n        }\n    };\n\n    const handleEnd = () => {\n        if (\n            typeof updateShouldGetCoordinates === 'function' &&\n            typeof updateShouldCallOnSelect === 'function'\n        ) {\n            updateShouldGetCoordinates(true);\n            updateShouldCallOnSelect(true);\n        }\n\n        if (typeof updateCanGetColorFromArea === 'function') {\n            updateCanGetColorFromArea(false);\n        }\n    };\n\n    const opacity = useMemo(() => extractRgbValues(selectedColor ?? '').a, [selectedColor]);\n\n    return (\n        <StyledSliders>\n            <StyledSlidersWrapper>\n                <HueSlider\n                    color={hueColor}\n                    opacity={opacity}\n                    onEnd={handleEnd}\n                    onStart={handleHueStart}\n                    onChange={handleHueColorChange}\n                />\n                {shouldShowTransparencySlider && (\n                    <TransparencySlider\n                        color={selectedColor}\n                        onEnd={handleEnd}\n                        onStart={handleStart}\n                        onChange={handleColorChange}\n                    />\n                )}\n            </StyledSlidersWrapper>\n            <ColorPreview />\n        </StyledSliders>\n    );\n};\n\nSliders.displayName = 'Sliders';\n\nexport default Sliders;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAA4B,OAAO;AACtE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,SAAS,MAAM,4BAA4B;AAClD,OAAOC,kBAAkB,MAAM,8CAA8C;AAC7E,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SAASC,aAAa,EAAEC,oBAAoB,QAAQ,kBAAkB;AAMtE,MAAMC,OAAO,GAAGC,IAAA,IAAoD;EAAA,IAAnD;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAC3D,MAAM;IACFE,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,0BAA0B;IAC1BC,wBAAwB;IACxBC,yBAAyB;IACzBC;EACJ,CAAC,GAAGlB,UAAU,CAACG,kBAAkB,CAAC;EAElC,MAAMgB,iBAAiB,GAAIC,KAA6B,IAAK;IACzD,IAAI,OAAOP,mBAAmB,KAAK,UAAU,IAAIO,KAAK,EAAE;MACpDP,mBAAmB,CAACO,KAAK,CAAC;IAC9B;EACJ,CAAC;EAED,MAAMC,oBAAoB,GAAID,KAA6B,IAAK;IAC5D,IAAI,OAAON,cAAc,KAAK,UAAU,IAAIM,KAAK,EAAE;MAC/CN,cAAc,CAACM,KAAK,CAAC;IACzB;EACJ,CAAC;EAED,MAAME,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAOP,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAAC,KAAK,CAAC;IACrC;EACJ,CAAC;EAED,MAAMQ,cAAc,GAAGA,CAAA,KAAM;IACzBD,WAAW,CAAC,CAAC;IAEb,IAAI,OAAOL,yBAAyB,KAAK,UAAU,EAAE;MACjDA,yBAAyB,CAAC,IAAI,CAAC;IACnC;EACJ,CAAC;EAED,MAAMO,SAAS,GAAGA,CAAA,KAAM;IACpB,IACI,OAAOT,0BAA0B,KAAK,UAAU,IAChD,OAAOC,wBAAwB,KAAK,UAAU,EAChD;MACED,0BAA0B,CAAC,IAAI,CAAC;MAChCC,wBAAwB,CAAC,IAAI,CAAC;IAClC;IAEA,IAAI,OAAOC,yBAAyB,KAAK,UAAU,EAAE;MACjDA,yBAAyB,CAAC,KAAK,CAAC;IACpC;EACJ,CAAC;EAED,MAAMQ,OAAO,GAAGxB,OAAO,CAAC,MAAMC,gBAAgB,CAACU,aAAa,IAAI,EAAE,CAAC,CAACc,CAAC,EAAE,CAACd,aAAa,CAAC,CAAC;EAEvF,oBACIb,KAAA,CAAA4B,aAAA,CAACpB,aAAa,qBACVR,KAAA,CAAA4B,aAAA,CAACnB,oBAAoB,qBACjBT,KAAA,CAAA4B,aAAA,CAACvB,SAAS;IACNgB,KAAK,EAAEF,QAAS;IAChBO,OAAO,EAAEA,OAAQ;IACjBG,KAAK,EAAEJ,SAAU;IACjBK,OAAO,EAAEN,cAAe;IACxBO,QAAQ,EAAET;EAAqB,CAClC,CAAC,EACDV,4BAA4B,iBACzBZ,KAAA,CAAA4B,aAAA,CAACtB,kBAAkB;IACfe,KAAK,EAAER,aAAc;IACrBgB,KAAK,EAAEJ,SAAU;IACjBK,OAAO,EAAEP,WAAY;IACrBQ,QAAQ,EAAEX;EAAkB,CAC/B,CAEa,CAAC,eACvBpB,KAAA,CAAA4B,aAAA,CAACrB,YAAY,MAAE,CACJ,CAAC;AAExB,CAAC;AAEDG,OAAO,CAACsB,WAAW,GAAG,SAAS;AAE/B,eAAetB,OAAO","ignoreList":[]}

package/lib/types/components/ColorPickerProvider.d.ts

@@ -10,6 +10,8 @@ interface IColorPickerContext {
     updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;
     shouldCallOnSelect?: boolean;
     updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;
+    canGetColorFromArea?: boolean;
+    updateCanGetColorFromArea?: (canGetColorFromArea: boolean) => void;
 }
 export declare const ColorPickerContext: React.Context<IColorPickerContext>;
 interface ColorPickerProviderProps {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/color-picker",
-    "version": "5.0.0-beta.911",
+    "version": "5.0.0-beta.913",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -39,8 +39,7 @@
         "url": "git+https://github.com/TobitSoftware/chayns-components.git"
     },
     "scripts": {
-        "build": "npm run build:cjs && npm run build:esm && npm run build:types && npm run minify",
-        "minify": "terser lib/cjs/index.js --compress --mangle --toplevel --source-map --output lib/cjs/index.min.js && terser lib/esm/index.js --compress --mangle --toplevel --source-map --output lib/esm/index.min.js",
+        "build": "npm run build:cjs && npm run build:esm && npm run build:types",
         "build:types": "tsc",
         "build:cjs": "cross-env NODE_ENV=cjs babel src --out-dir lib/cjs --extensions=.ts,.tsx --source-maps --ignore=src/stories",
         "build:esm": "cross-env NODE_ENV=esm babel src --out-dir lib/esm --extensions=.ts,.tsx --source-maps --ignore=src/stories",
@@ -66,13 +65,11 @@
         "lerna": "^8.1.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "source-map-explorer": "^2.5.3",
         "styled-components": "^6.1.13",
-        "terser": "^5.36.0",
         "typescript": "^5.7.2"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.911",
+        "@chayns-components/core": "^5.0.0-beta.913",
         "@chayns/colors": "^2.0.0"
     },
     "peerDependencies": {
@@ -85,5 +82,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cbbad4cae26a078bf6ae2c4e7e52fe9a2edd8f94"
+    "gitHead": "cbb05bba8d18477b92474269c86ee738f8a85dd2"
 }

package/lib/cjs/index.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ColorPicker",{enumerable:!0,get:function(){return e.default}}),Object.defineProperty(exports,"HueSlider",{enumerable:!0,get:function(){return r.default}}),Object.defineProperty(exports,"TransparencySlider",{enumerable:!0,get:function(){return t.default}}),Object.defineProperty(exports,"hexToRgb",{enumerable:!0,get:function(){return n.hexToRgb}}),Object.defineProperty(exports,"rgbToHex",{enumerable:!0,get:function(){return n.rgbToHex}});var e=o(require("./components/color-picker/ColorPicker")),r=o(require("./components/hue-slider/HueSlider")),t=o(require("./components/transparency-slider/TransparencySlider")),n=require("./utils/color");function o(e){return e&&e.__esModule?e:{default:e}}

package/lib/cjs/index.min.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Object","defineProperty","exports","value","enumerable","get","_ColorPicker","default","_HueSlider","_TransparencySlider","_color","hexToRgb","rgbToHex","_interopRequireDefault","require","e","__esModule"],"sources":["lib/cjs/index.js"],"mappings":"AAAA,aAEAA,OAAOC,eAAeC,QAAS,aAAc,CAC3CC,OAAO,IAETH,OAAOC,eAAeC,QAAS,cAAe,CAC5CE,YAAY,EACZC,IAAK,WACH,OAAOC,EAAaC,OACtB,IAEFP,OAAOC,eAAeC,QAAS,YAAa,CAC1CE,YAAY,EACZC,IAAK,WACH,OAAOG,EAAWD,OACpB,IAEFP,OAAOC,eAAeC,QAAS,qBAAsB,CACnDE,YAAY,EACZC,IAAK,WACH,OAAOI,EAAoBF,OAC7B,IAEFP,OAAOC,eAAeC,QAAS,WAAY,CACzCE,YAAY,EACZC,IAAK,WACH,OAAOK,EAAOC,QAChB,IAEFX,OAAOC,eAAeC,QAAS,WAAY,CACzCE,YAAY,EACZC,IAAK,WACH,OAAOK,EAAOE,QAChB,IAEF,IAAIN,EAAeO,EAAuBC,QAAQ,0CAC9CN,EAAaK,EAAuBC,QAAQ,sCAC5CL,EAAsBI,EAAuBC,QAAQ,wDACrDJ,EAASI,QAAQ,iBACrB,SAASD,EAAuBE,GAAK,OAAOA,GAAKA,EAAEC,WAAaD,EAAI,CAAER,QAASQ,EAAK","ignoreList":[]}

package/lib/esm/index.min.js

@@ -1 +0,0 @@
-export{default as ColorPicker}from"./components/color-picker/ColorPicker";export{default as HueSlider}from"./components/hue-slider/HueSlider";export{default as TransparencySlider}from"./components/transparency-slider/TransparencySlider";export{hexToRgb,rgbToHex}from"./utils/color";

package/lib/esm/index.min.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["hexToRgb","rgbToHex"],"sources":["lib/esm/index.js"],"mappings":"OAAS,2BAA8B,+CAC9B,yBAA4B,2CAC5B,kCAAqC,6DACrCA,SAAUC,aAAgB","ignoreList":[]}