@chayns-components/color-picker 5.5.30 → 5.5.34

package/lib/cjs/components/transparency-slider/TransparencySlider.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
+var _core = require("@chayns-components/core");
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../utils/color");
 var _TransparencySlider = require("./TransparencySlider.styles");
@@ -13,13 +14,21 @@ const TransparencySlider = ({
   onChange,
   onStart,
   onEnd,
-  color = 'rgba(255, 0, 0, 1)'
+  color = 'rgba(255, 0, 0, 1)',
+  shouldEnableKeyboardHighlighting
 }) => {
   const [editedValue, setEditedValue] = (0, _react.useState)(0);
   const [pureColor, setPureColor] = (0, _react.useState)();
   const [previewColor, setPreviewColor] = (0, _react.useState)();
   const sliderThumbRef = (0, _react.useRef)(null);
   const sliderRef = (0, _react.useRef)(null);
+  const shouldShowKeyboardHighlighting = (0, _core.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  (0, _core.useFocusRingPortal)(sliderRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: sliderThumbRef,
+    shape: 'circle',
+    padding: 3
+  });
   (0, _react.useEffect)(() => {
     if (color) {
       let rgb;

package/lib/cjs/components/transparency-slider/TransparencySlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencySlider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_color","_TransparencySlider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TransparencySlider","onChange","onStart","onEnd","color","editedValue","setEditedValue","useState","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","useRef","sliderRef","useEffect","rgb","isValidRGBA","splitRgb","hexToRgb","g","b","a","newColor","handleInputChange","useCallback","event","Number","target","value","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","handleEnd","createElement","StyledTransparencySlider","StyledTransparencySliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledTransparencySliderBackground","StyledTransparencySliderThumbWrapper","$position","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","displayName","_default","exports"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TransparencySlider.js","names":["_chaynsApi","require","_core","_react","_interopRequireWildcard","_color","_TransparencySlider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TransparencySlider","onChange","onStart","onEnd","color","shouldEnableKeyboardHighlighting","editedValue","setEditedValue","useState","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","useRef","sliderRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","overlayRef","shape","padding","useEffect","rgb","isValidRGBA","splitRgb","hexToRgb","g","b","a","newColor","handleInputChange","useCallback","event","Number","target","value","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","handleEnd","createElement","StyledTransparencySlider","StyledTransparencySliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledTransparencySliderBackground","StyledTransparencySliderThumbWrapper","$position","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","displayName","_default","exports"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n    /**\n     * Enables keyboard-only focus highlighting for the slider.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n    shouldEnableKeyboardHighlighting,\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(sliderRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        overlayRef: sliderThumbRef,\n        shape: 'circle',\n        padding: 3,\n    });\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAOqC,SAAAG,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAyBrC,MAAMkB,kBAAkB,GAAGA,CAAC;EACxBC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK,GAAG,oBAAoB;EAC5BC;AACqB,CAAC,KAAK;EAC3B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EACjD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAF,eAAQ,EAAS,CAAC;EACpD,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAJ,eAAQ,EAAS,CAAC;EAE1D,MAAMK,cAAc,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACnD,MAAMC,SAAS,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAChD,MAAME,8BAA8B,GAAG,IAAAC,kCAA4B,EAC/DZ,gCACJ,CAAC;EAED,IAAAa,wBAAkB,EAACH,SAAS,EAAE;IAC1BI,SAAS,EAAEH,8BAA8B;IACzCI,UAAU,EAAEP,cAAc;IAC1BQ,KAAK,EAAE,QAAQ;IACfC,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAInB,KAAK,EAAE;MACP,IAAIoB,GAAG;MAEP,IAAI,IAAAC,kBAAW,EAACrB,KAAK,CAAC,EAAE;QACpBoB,GAAG,GAAG,IAAAE,eAAQ,EAACtB,KAAK,CAAC;MACzB,CAAC,MAAM;QACHoB,GAAG,GAAG,IAAAG,eAAQ,EAACvB,KAAK,CAAC;MACzB;MAEA,IAAI,CAACoB,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAExC,CAAC;QAAE4C,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGN,GAAG;MAE1B,MAAMO,QAAQ,GAAG,QAAQ/C,CAAC,KAAK4C,CAAC,KAAKC,CAAC,KAAKC,CAAC,GAAG;MAE/ClB,eAAe,CAACmB,QAAQ,CAAC;MACzBrB,YAAY,CAAC,OAAO1B,CAAC,IAAI4C,CAAC,IAAIC,CAAC,KAAK,CAAC;MACrCtB,cAAc,CAAC,GAAG,GAAGuB,CAAC,GAAG,GAAG,CAAC;IACjC;EACJ,CAAC,EAAE,CAAC1B,KAAK,CAAC,CAAC;EAEX,MAAM4B,iBAAiB,GAAG,IAAAC,kBAAW,EAChCC,KAAoC,IAAK;IACtC,MAAMJ,CAAC,GAAGK,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;IAEpC9B,cAAc,CAACuB,CAAC,CAAC;IAEjB,MAAMN,GAAG,GAAG,IAAAE,eAAQ,EAACjB,SAAS,CAAC;IAE/B,IAAI,CAACe,GAAG,EAAE;MACN;IACJ;IAEA,MAAM;MAAExC,CAAC;MAAE4C,CAAC;MAAEC;IAAE,CAAC,GAAGL,GAAG;IAEvB,MAAMO,QAAQ,GAAG,QAAQ/C,CAAC,KAAK4C,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGC,CAAC,IAAI,GAAG,GAAG;IAE7DlB,eAAe,CAACmB,QAAQ,CAAC;IAEzB,IAAI,OAAO9B,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC8B,QAAQ,CAAC;IACtB;EACJ,CAAC,EACD,CAAC9B,QAAQ,EAAEQ,SAAS,CACxB,CAAC;EAED,MAAM6B,mBAAmB,GAAG,IAAAC,cAAO,EAAC,MAAM;IACtC,IAAIxB,SAAS,CAACyB,OAAO,IAAI3B,cAAc,CAAC2B,OAAO,EAAE;MAC7C,OACKlC,WAAW,GAAG,GAAG,IACjBS,SAAS,CAACyB,OAAO,CAACC,WAAW,GAAG5B,cAAc,CAAC2B,OAAO,CAACC,WAAW,GAAG,CAAC,CAAC;IAEhF;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAACnC,WAAW,CAAC,CAAC;EAEjB,MAAMoC,WAAW,GAAG,IAAAT,kBAAW,EAAC,MAAM;IAClC,KAAK,IAAAU,kCAAuB,EAAC,KAAK,CAAC;IAEnC,IAAI,OAAOzC,OAAO,KAAK,UAAU,EAAE;MAC/B,MAAMsB,GAAG,GAAG,IAAAE,eAAQ,EAACjB,SAAS,CAAC;MAE/B,IAAI,CAACe,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAExC,CAAC;QAAE4C,CAAC;QAAEC;MAAE,CAAC,GAAGL,GAAG;MAEvB,MAAMO,QAAQ,GAAG,QAAQ/C,CAAC,KAAK4C,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGvB,WAAW,IAAI,GAAG,GAAG;MAEvEJ,OAAO,CAAC6B,QAAQ,CAAC;IACrB;EACJ,CAAC,EAAE,CAACzB,WAAW,EAAEJ,OAAO,EAAEO,SAAS,CAAC,CAAC;EAErC,MAAMmC,SAAS,GAAG,IAAAX,kBAAW,EAAC,MAAM;IAChC,KAAK,IAAAU,kCAAuB,EAAC,IAAI,CAAC;IAElC,IAAI,OAAOxC,KAAK,KAAK,UAAU,EAAE;MAC7B,MAAMqB,GAAG,GAAG,IAAAE,eAAQ,EAACjB,SAAS,CAAC;MAE/B,IAAI,CAACe,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAExC,CAAC;QAAE4C,CAAC;QAAEC;MAAE,CAAC,GAAGL,GAAG;MAEvB,MAAMO,QAAQ,GAAG,QAAQ/C,CAAC,KAAK4C,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGvB,WAAW,IAAI,GAAG,GAAG;MAEvEH,KAAK,CAAC4B,QAAQ,CAAC;IACnB;EACJ,CAAC,EAAE,CAACzB,WAAW,EAAEH,KAAK,EAAEM,SAAS,CAAC,CAAC;EAEnC,oBACIhC,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,mBAAA,CAAAkE,wBAAwB,qBACrBrE,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,mBAAA,CAAAmE,6BAA6B;IAC1BC,GAAG,EAAEjC,SAAU;IACfkC,MAAM,EAAExC,SAAU;IAClByC,IAAI,EAAC,OAAO;IACZC,GAAG,EAAE,CAAE;IACPC,GAAG,EAAE,GAAI;IACTf,KAAK,EAAE/B,WAAY;IACnB+C,aAAa,EAAEX,WAAY;IAC3BY,WAAW,EAAEV,SAAU;IACvB3C,QAAQ,EAAE+B;EAAkB,CAC/B,CAAC,eACFvD,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,mBAAA,CAAA2E,kCAAkC,MAAE,CAAC,eACtC9E,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,mBAAA,CAAA4E,oCAAoC;IACjCR,GAAG,EAAEnC,cAAe;IACpB4C,SAAS,EAAEnB;EAAoB,gBAE/B7D,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,mBAAA,CAAA8E,uCAAuC,MAAE,CAAC,eAC3CjF,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,mBAAA,CAAA+E,6BAA6B;IAACV,MAAM,EAAEtC;EAAa,CAAE,CACpB,CAChB,CAAC;AAEnC,CAAC;AAEDX,kBAAkB,CAAC4D,WAAW,GAAG,oBAAoB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvE,OAAA,GAEvCS,kBAAkB","ignoreList":[]}

package/lib/cjs/hooks/useColorAreaKeyboardNavigation.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorAreaKeyboardNavigation = void 0;
+var _react = require("react");
+const useColorAreaKeyboardNavigation = ({
+  move,
+  onChangeStart,
+  onChangeEnd,
+  x,
+  y
+}) => (0, _react.useCallback)(event => {
+  const step = event.shiftKey ? 10 : 1;
+  const horizontalChange = event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0;
+  const verticalChange = event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;
+  if (horizontalChange === 0 && verticalChange === 0) {
+    return;
+  }
+  event.preventDefault();
+  onChangeStart();
+  move(x.get() + horizontalChange, y.get() + verticalChange);
+  onChangeEnd();
+}, [move, onChangeEnd, onChangeStart, x, y]);
+exports.useColorAreaKeyboardNavigation = useColorAreaKeyboardNavigation;
+//# sourceMappingURL=useColorAreaKeyboardNavigation.js.map

package/lib/cjs/hooks/useColorAreaKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorAreaKeyboardNavigation.js","names":["_react","require","useColorAreaKeyboardNavigation","move","onChangeStart","onChangeEnd","x","y","useCallback","event","step","shiftKey","horizontalChange","key","verticalChange","preventDefault","get","exports"],"sources":["../../../src/hooks/useColorAreaKeyboardNavigation.ts"],"sourcesContent":["import { type KeyboardEvent, useCallback } from 'react';\n\ntype UseColorAreaKeyboardNavigationOptions = {\n    move: (x: number, y: number) => void;\n    onChangeStart: VoidFunction;\n    onChangeEnd: VoidFunction;\n    x: { get: () => number };\n    y: { get: () => number };\n};\n\nexport const useColorAreaKeyboardNavigation = ({\n    move,\n    onChangeStart,\n    onChangeEnd,\n    x,\n    y,\n}: UseColorAreaKeyboardNavigationOptions) =>\n    useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            const step = event.shiftKey ? 10 : 1;\n            const horizontalChange =\n                event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0;\n            const verticalChange =\n                event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;\n\n            if (horizontalChange === 0 && verticalChange === 0) {\n                return;\n            }\n\n            event.preventDefault();\n            onChangeStart();\n            move(x.get() + horizontalChange, y.get() + verticalChange);\n            onChangeEnd();\n        },\n        [move, onChangeEnd, onChangeStart, x, y],\n    );\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAUO,MAAMC,8BAA8B,GAAGA,CAAC;EAC3CC,IAAI;EACJC,aAAa;EACbC,WAAW;EACXC,CAAC;EACDC;AACmC,CAAC,KACpC,IAAAC,kBAAW,EACNC,KAAoC,IAAK;EACtC,MAAMC,IAAI,GAAGD,KAAK,CAACE,QAAQ,GAAG,EAAE,GAAG,CAAC;EACpC,MAAMC,gBAAgB,GAClBH,KAAK,CAACI,GAAG,KAAK,WAAW,GAAG,CAACH,IAAI,GAAGD,KAAK,CAACI,GAAG,KAAK,YAAY,GAAGH,IAAI,GAAG,CAAC;EAC7E,MAAMI,cAAc,GAChBL,KAAK,CAACI,GAAG,KAAK,SAAS,GAAG,CAACH,IAAI,GAAGD,KAAK,CAACI,GAAG,KAAK,WAAW,GAAGH,IAAI,GAAG,CAAC;EAE1E,IAAIE,gBAAgB,KAAK,CAAC,IAAIE,cAAc,KAAK,CAAC,EAAE;IAChD;EACJ;EAEAL,KAAK,CAACM,cAAc,CAAC,CAAC;EACtBX,aAAa,CAAC,CAAC;EACfD,IAAI,CAACG,CAAC,CAACU,GAAG,CAAC,CAAC,GAAGJ,gBAAgB,EAAEL,CAAC,CAACS,GAAG,CAAC,CAAC,GAAGF,cAAc,CAAC;EAC1DT,WAAW,CAAC,CAAC;AACjB,CAAC,EACD,CAACF,IAAI,EAAEE,WAAW,EAAED,aAAa,EAAEE,CAAC,EAAEC,CAAC,CAC3C,CAAC;AAACU,OAAA,CAAAf,8BAAA,GAAAA,8BAAA","ignoreList":[]}

package/lib/cjs/hooks/usePresetColorKeyboardNavigation.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePresetColorKeyboardNavigation = void 0;
+var _react = require("react");
+const usePresetColorKeyboardNavigation = ({
+  onFocusChange
+}) => (0, _react.useCallback)(event => {
+  var _currentPreset$parent, _nextPreset, _nextPreset2;
+  const currentPreset = event.target instanceof HTMLElement ? event.target.closest('[data-preset-color-index]') : null;
+  if (!currentPreset || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+    return;
+  }
+  event.preventDefault();
+  const currentIndex = Number(currentPreset.dataset.presetColorIndex);
+  const presets = Array.from(((_currentPreset$parent = currentPreset.parentElement) === null || _currentPreset$parent === void 0 ? void 0 : _currentPreset$parent.querySelectorAll('[data-preset-color-index]')) ?? []);
+  const currentRect = currentPreset.getBoundingClientRect();
+  let nextPreset;
+  if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+    nextPreset = presets[currentIndex + (event.key === 'ArrowLeft' ? -1 : 1)];
+  } else {
+    const rowDirection = event.key === 'ArrowUp' ? -1 : 1;
+    const targetTop = currentRect.top + rowDirection * currentRect.height;
+    nextPreset = presets.filter(preset => {
+      const {
+        top
+      } = preset.getBoundingClientRect();
+      return rowDirection < 0 ? top < currentRect.top : top > currentRect.top;
+    }).sort((left, right) => {
+      const leftRect = left.getBoundingClientRect();
+      const rightRect = right.getBoundingClientRect();
+      const leftDistance = Math.abs(leftRect.top - targetTop) * 1000 + Math.abs(leftRect.left - currentRect.left);
+      const rightDistance = Math.abs(rightRect.top - targetTop) * 1000 + Math.abs(rightRect.left - currentRect.left);
+      return leftDistance - rightDistance;
+    })[0];
+  }
+  const nextIndex = Number((_nextPreset = nextPreset) === null || _nextPreset === void 0 ? void 0 : _nextPreset.dataset.presetColorIndex);
+  if (!Number.isFinite(nextIndex) || nextIndex === currentIndex) {
+    return;
+  }
+  onFocusChange(nextIndex);
+  (_nextPreset2 = nextPreset) === null || _nextPreset2 === void 0 || _nextPreset2.focus();
+}, [onFocusChange]);
+exports.usePresetColorKeyboardNavigation = usePresetColorKeyboardNavigation;
+//# sourceMappingURL=usePresetColorKeyboardNavigation.js.map

package/lib/cjs/hooks/usePresetColorKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresetColorKeyboardNavigation.js","names":["_react","require","usePresetColorKeyboardNavigation","onFocusChange","useCallback","event","_currentPreset$parent","_nextPreset","_nextPreset2","currentPreset","target","HTMLElement","closest","includes","key","preventDefault","currentIndex","Number","dataset","presetColorIndex","presets","Array","from","parentElement","querySelectorAll","currentRect","getBoundingClientRect","nextPreset","rowDirection","targetTop","top","height","filter","preset","sort","left","right","leftRect","rightRect","leftDistance","Math","abs","rightDistance","nextIndex","isFinite","focus","exports"],"sources":["../../../src/hooks/usePresetColorKeyboardNavigation.ts"],"sourcesContent":["import { type KeyboardEvent, useCallback } from 'react';\n\ntype UsePresetColorKeyboardNavigationOptions = {\n    onFocusChange: (index: number) => void;\n};\n\nexport const usePresetColorKeyboardNavigation = ({\n    onFocusChange,\n}: UsePresetColorKeyboardNavigationOptions) =>\n    useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            const currentPreset =\n                event.target instanceof HTMLElement\n                    ? event.target.closest<HTMLElement>('[data-preset-color-index]')\n                    : null;\n\n            if (\n                !currentPreset ||\n                !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)\n            ) {\n                return;\n            }\n\n            event.preventDefault();\n\n            const currentIndex = Number(currentPreset.dataset.presetColorIndex);\n            const presets = Array.from(\n                currentPreset.parentElement?.querySelectorAll<HTMLElement>(\n                    '[data-preset-color-index]',\n                ) ?? [],\n            );\n            const currentRect = currentPreset.getBoundingClientRect();\n            let nextPreset: HTMLElement | undefined;\n\n            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n                nextPreset = presets[currentIndex + (event.key === 'ArrowLeft' ? -1 : 1)];\n            } else {\n                const rowDirection = event.key === 'ArrowUp' ? -1 : 1;\n                const targetTop = currentRect.top + rowDirection * currentRect.height;\n\n                nextPreset = presets\n                    .filter((preset) => {\n                        const { top } = preset.getBoundingClientRect();\n                        return rowDirection < 0 ? top < currentRect.top : top > currentRect.top;\n                    })\n                    .sort((left, right) => {\n                        const leftRect = left.getBoundingClientRect();\n                        const rightRect = right.getBoundingClientRect();\n                        const leftDistance =\n                            Math.abs(leftRect.top - targetTop) * 1000 +\n                            Math.abs(leftRect.left - currentRect.left);\n                        const rightDistance =\n                            Math.abs(rightRect.top - targetTop) * 1000 +\n                            Math.abs(rightRect.left - currentRect.left);\n                        return leftDistance - rightDistance;\n                    })[0];\n            }\n\n            const nextIndex = Number(nextPreset?.dataset.presetColorIndex);\n\n            if (!Number.isFinite(nextIndex) || nextIndex === currentIndex) {\n                return;\n            }\n\n            onFocusChange(nextIndex);\n            nextPreset?.focus();\n        },\n        [onFocusChange],\n    );\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-picker/ColorPicker.js

@@ -18,7 +18,8 @@ const ColorPicker = ({
   shouldShowRoundPreviewColor = true,
   shouldShowTransparencySlider = false,
   shouldUseSiteColors = false,
-  alignment
+  alignment,
+  shouldEnableKeyboardHighlighting
 }) => /*#__PURE__*/React.createElement(ColorPickerProvider, {
   selectedColor: selectedColor,
   onSelect: onSelect
@@ -35,7 +36,8 @@ const ColorPicker = ({
   shouldShowRoundPreviewColor: shouldShowRoundPreviewColor,
   shouldShowTransparencySlider: shouldShowTransparencySlider,
   shouldUseSiteColors: shouldUseSiteColors,
-  shouldHideColorArea: shouldHideColorArea
+  shouldHideColorArea: shouldHideColorArea,
+  shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
 }, children)));
 ColorPicker.displayName = 'ColorPicker';
 export default ColorPicker;

package/lib/esm/components/color-picker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["React","ColorPickerProvider","ColorPickerWrapper","StyledColorPicker","ColorPicker","children","onPresetColorAdd","onPresetColorRemove","onSelect","shouldHideColorArea","shouldHideDefaultPresetColors","presetColors","selectedColor","shouldShowAsPopup","shouldShowMoreOptions","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldShowTransparencySlider","shouldUseSiteColors","alignment","createElement","displayName"],"sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\nimport { PopupAlignment } from '@chayns-components/core';\n\ninterface ColorPickerProps {\n    /**\n     * The element that should be rendered to trigger the ColorPicker popup on click.\n     */\n    children?: ReactNode;\n    /**\n     * Function to be executed when a preset color is added.\n     */\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    /**\n     * Function to be executed when a preset color is removed.\n     */\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * Colors the user can select from.\n     */\n    presetColors?: IPresetColor[];\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n    /**\n     * Whether the ColorPicker should be displayed inside a popup.\n     */\n    shouldShowAsPopup?: boolean;\n    /**\n     * Whether the more options accordion should be displayed.\n     */\n    shouldShowMoreOptions?: boolean;\n    /**\n     * Whether the preset colors should be displayed.\n     */\n    shouldShowPresetColors?: boolean;\n    /**\n     * Whether the preview color should be displayed as text.\n     */\n    shouldShowPreviewColorString?: boolean;\n    /**\n     * Whether the preview color should be displayed round.\n     */\n    shouldShowRoundPreviewColor?: boolean;\n    /**\n     * Whether the transparency slider should be displayed.\n     */\n    shouldShowTransparencySlider?: boolean;\n    /**\n     * Whether presetColors should be got and uploaded to the site storage.\n     */\n    shouldUseSiteColors?: boolean;\n    /**\n     * Whether the color area should be displayed.\n     */\n    shouldHideColorArea?: boolean;\n    /**\n     * Whether the default preset colors should be hidden.\n     */\n    shouldHideDefaultPresetColors?: boolean;\n    /**\n     * The alignment of the popup\n     */\n    alignment?: PopupAlignment;\n}\n\nconst ColorPicker = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    onSelect,\n    shouldHideColorArea = false,\n    shouldHideDefaultPresetColors = false,\n    presetColors,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    shouldShowAsPopup = true,\n    shouldShowMoreOptions = false,\n    shouldShowPresetColors = false,\n    shouldShowPreviewColorString = true,\n    shouldShowRoundPreviewColor = true,\n    shouldShowTransparencySlider = false,\n    shouldUseSiteColors = false,\n    alignment,\n}: ColorPickerProps) => (\n    <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n        <StyledColorPicker>\n            <ColorPickerWrapper\n                alignment={alignment}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n                presetColors={presetColors}\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                shouldShowAsPopup={shouldShowAsPopup}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowPresetColors={shouldShowPresetColors}\n                shouldShowPreviewColorString={shouldShowPreviewColorString}\n                shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldHideColorArea={shouldHideColorArea}\n            >\n                {children}\n            </ColorPickerWrapper>\n        </StyledColorPicker>\n    </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,OAAOC,mBAAmB,MAAM,wBAAwB;AACxD,OAAOC,kBAAkB,MAAM,2CAA2C;AAC1E,SAASC,iBAAiB,QAAQ,sBAAsB;AAsExD,MAAMC,WAAW,GAAGA,CAAC;EACjBC,QAAQ;EACRC,gBAAgB;EAChBC,mBAAmB;EACnBC,QAAQ;EACRC,mBAAmB,GAAG,KAAK;EAC3BC,6BAA6B,GAAG,KAAK;EACrCC,YAAY;EACZC,aAAa,GAAG,qBAAqB;EACrCC,iBAAiB,GAAG,IAAI;EACxBC,qBAAqB,GAAG,KAAK;EAC7BC,sBAAsB,GAAG,KAAK;EAC9BC,4BAA4B,GAAG,IAAI;EACnCC,2BAA2B,GAAG,IAAI;EAClCC,4BAA4B,GAAG,KAAK;EACpCC,mBAAmB,GAAG,KAAK;EAC3BC;AACc,CAAC,kBACfpB,KAAA,CAAAqB,aAAA,CAACpB,mBAAmB;EAACW,aAAa,EAAEA,aAAc;EAACJ,QAAQ,EAAEA;AAAS,gBAClER,KAAA,CAAAqB,aAAA,CAAClB,iBAAiB,qBACdH,KAAA,CAAAqB,aAAA,CAACnB,kBAAkB;EACfkB,SAAS,EAAEA,SAAU;EACrBd,gBAAgB,EAAEA,gBAAiB;EACnCC,mBAAmB,EAAEA,mBAAoB;EACzCI,YAAY,EAAEA,YAAa;EAC3BD,6BAA6B,EAAEA,6BAA8B;EAC7DG,iBAAiB,EAAEA,iBAAkB;EACrCC,qBAAqB,EAAEA,qBAAsB;EAC7CC,sBAAsB,EAAEA,sBAAuB;EAC/CC,4BAA4B,EAAEA,4BAA6B;EAC3DC,2BAA2B,EAAEA,2BAA4B;EACzDC,4BAA4B,EAAEA,4BAA6B;EAC3DC,mBAAmB,EAAEA,mBAAoB;EACzCV,mBAAmB,EAAEA;AAAoB,GAExCJ,QACe,CACL,CACF,CACxB;AAEDD,WAAW,CAACkB,WAAW,GAAG,aAAa;AAEvC,eAAelB,WAAW","ignoreList":[]}
+{"version":3,"file":"ColorPicker.js","names":["React","ColorPickerProvider","ColorPickerWrapper","StyledColorPicker","ColorPicker","children","onPresetColorAdd","onPresetColorRemove","onSelect","shouldHideColorArea","shouldHideDefaultPresetColors","presetColors","selectedColor","shouldShowAsPopup","shouldShowMoreOptions","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldShowTransparencySlider","shouldUseSiteColors","alignment","shouldEnableKeyboardHighlighting","createElement","displayName"],"sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\nimport { PopupAlignment } from '@chayns-components/core';\n\ninterface ColorPickerProps {\n    /**\n     * The element that should be rendered to trigger the ColorPicker popup on click.\n     */\n    children?: ReactNode;\n    /**\n     * Function to be executed when a preset color is added.\n     */\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    /**\n     * Function to be executed when a preset color is removed.\n     */\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * Colors the user can select from.\n     */\n    presetColors?: IPresetColor[];\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n    /**\n     * Whether the ColorPicker should be displayed inside a popup.\n     */\n    shouldShowAsPopup?: boolean;\n    /**\n     * Whether the more options accordion should be displayed.\n     */\n    shouldShowMoreOptions?: boolean;\n    /**\n     * Whether the preset colors should be displayed.\n     */\n    shouldShowPresetColors?: boolean;\n    /**\n     * Whether the preview color should be displayed as text.\n     */\n    shouldShowPreviewColorString?: boolean;\n    /**\n     * Whether the preview color should be displayed round.\n     */\n    shouldShowRoundPreviewColor?: boolean;\n    /**\n     * Whether the transparency slider should be displayed.\n     */\n    shouldShowTransparencySlider?: boolean;\n    /**\n     * Whether presetColors should be got and uploaded to the site storage.\n     */\n    shouldUseSiteColors?: boolean;\n    /**\n     * Whether the color area should be displayed.\n     */\n    shouldHideColorArea?: boolean;\n    /**\n     * Whether the default preset colors should be hidden.\n     */\n    shouldHideDefaultPresetColors?: boolean;\n    /**\n     * The alignment of the popup\n     */\n    alignment?: PopupAlignment;\n    /**\n     * Enables keyboard-only focus highlighting for color picker controls.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst ColorPicker = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    onSelect,\n    shouldHideColorArea = false,\n    shouldHideDefaultPresetColors = false,\n    presetColors,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    shouldShowAsPopup = true,\n    shouldShowMoreOptions = false,\n    shouldShowPresetColors = false,\n    shouldShowPreviewColorString = true,\n    shouldShowRoundPreviewColor = true,\n    shouldShowTransparencySlider = false,\n    shouldUseSiteColors = false,\n    alignment,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerProps) => (\n    <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n        <StyledColorPicker>\n            <ColorPickerWrapper\n                alignment={alignment}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n                presetColors={presetColors}\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                shouldShowAsPopup={shouldShowAsPopup}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowPresetColors={shouldShowPresetColors}\n                shouldShowPreviewColorString={shouldShowPreviewColorString}\n                shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldHideColorArea={shouldHideColorArea}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            >\n                {children}\n            </ColorPickerWrapper>\n        </StyledColorPicker>\n    </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,OAAOC,mBAAmB,MAAM,wBAAwB;AACxD,OAAOC,kBAAkB,MAAM,2CAA2C;AAC1E,SAASC,iBAAiB,QAAQ,sBAAsB;AA0ExD,MAAMC,WAAW,GAAGA,CAAC;EACjBC,QAAQ;EACRC,gBAAgB;EAChBC,mBAAmB;EACnBC,QAAQ;EACRC,mBAAmB,GAAG,KAAK;EAC3BC,6BAA6B,GAAG,KAAK;EACrCC,YAAY;EACZC,aAAa,GAAG,qBAAqB;EACrCC,iBAAiB,GAAG,IAAI;EACxBC,qBAAqB,GAAG,KAAK;EAC7BC,sBAAsB,GAAG,KAAK;EAC9BC,4BAA4B,GAAG,IAAI;EACnCC,2BAA2B,GAAG,IAAI;EAClCC,4BAA4B,GAAG,KAAK;EACpCC,mBAAmB,GAAG,KAAK;EAC3BC,SAAS;EACTC;AACc,CAAC,kBACfrB,KAAA,CAAAsB,aAAA,CAACrB,mBAAmB;EAACW,aAAa,EAAEA,aAAc;EAACJ,QAAQ,EAAEA;AAAS,gBAClER,KAAA,CAAAsB,aAAA,CAACnB,iBAAiB,qBACdH,KAAA,CAAAsB,aAAA,CAACpB,kBAAkB;EACfkB,SAAS,EAAEA,SAAU;EACrBd,gBAAgB,EAAEA,gBAAiB;EACnCC,mBAAmB,EAAEA,mBAAoB;EACzCI,YAAY,EAAEA,YAAa;EAC3BD,6BAA6B,EAAEA,6BAA8B;EAC7DG,iBAAiB,EAAEA,iBAAkB;EACrCC,qBAAqB,EAAEA,qBAAsB;EAC7CC,sBAAsB,EAAEA,sBAAuB;EAC/CC,4BAA4B,EAAEA,4BAA6B;EAC3DC,2BAA2B,EAAEA,2BAA4B;EACzDC,4BAA4B,EAAEA,4BAA6B;EAC3DC,mBAAmB,EAAEA,mBAAoB;EACzCV,mBAAmB,EAAEA,mBAAoB;EACzCY,gCAAgC,EAAEA;AAAiC,GAElEhB,QACe,CACL,CACF,CACxB;AAEDD,WAAW,CAACmB,WAAW,GAAG,aAAa;AAEvC,eAAenB,WAAW","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import { Popup } from '@chayns-components/core';
 import React, { useContext, useMemo } from 'react';
-import ColorPickerPopup from '../../color-picker-popup/ColorPickerPopup';
+import { ColorPickerPopupContent } from '../../color-picker-popup/ColorPickerPopup';
 import { ColorPickerContext } from '../../ColorPickerProvider';
 import { StyledColorPickerWrapper, StyledColorPickerWrapperInfo, StyledColorPickerWrapperInfoColor, StyledColorPickerWrapperInfoColorWrapper, StyledColorPickerWrapperInfoText } from './ColorPickerWrapper.styles';
 const ColorPickerWrapper = ({
@@ -17,12 +17,13 @@ const ColorPickerWrapper = ({
   shouldHideColorArea,
   shouldShowTransparencySlider,
   shouldUseSiteColors,
-  alignment
+  alignment,
+  shouldEnableKeyboardHighlighting
 }) => {
   const {
     selectedColor
   } = useContext(ColorPickerContext);
-  const content = useMemo(() => /*#__PURE__*/React.createElement(ColorPickerPopup, {
+  const content = useMemo(() => /*#__PURE__*/React.createElement(ColorPickerPopupContent, {
     shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
     shouldHideColorArea: shouldHideColorArea,
     shouldShowPresetColors: shouldShowPresetColors,
@@ -31,8 +32,9 @@ const ColorPickerWrapper = ({
     presetColors: presetColors,
     shouldUseSiteColors: shouldUseSiteColors,
     shouldShowMoreOptions: shouldShowMoreOptions,
-    shouldShowTransparencySlider: shouldShowTransparencySlider
-  }), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldHideColorArea, shouldHideDefaultPresetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider, shouldUseSiteColors]);
+    shouldShowTransparencySlider: shouldShowTransparencySlider,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldHideColorArea, shouldHideDefaultPresetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider, shouldUseSiteColors, shouldEnableKeyboardHighlighting]);
   return /*#__PURE__*/React.createElement(StyledColorPickerWrapper, null, shouldShowAsPopup ? /*#__PURE__*/React.createElement(Popup, {
     content: content,
     alignment: alignment

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","StyledColorPickerWrapperInfoColorWrapper","StyledColorPickerWrapperInfoText","ColorPickerWrapper","children","onPresetColorAdd","onPresetColorRemove","presetColors","shouldShowAsPopup","shouldShowMoreOptions","shouldHideDefaultPresetColors","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldHideColorArea","shouldShowTransparencySlider","shouldUseSiteColors","alignment","selectedColor","content","createElement","$shouldShowRoundPreviewColor","$color","displayName"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup, PopupAlignment } from '@chayns-components/core';\nimport React, { ReactNode, 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    children?: ReactNode;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    presetColors?: IPresetColor[];\n    shouldShowAsPopup: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowPresetColors: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n    shouldShowTransparencySlider: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    alignment?: PopupAlignment;\n}\n\nconst ColorPickerWrapper = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    presetColors,\n    shouldShowAsPopup,\n    shouldShowMoreOptions,\n    shouldHideDefaultPresetColors,\n    shouldShowPresetColors,\n    shouldShowPreviewColorString,\n    shouldShowRoundPreviewColor,\n    shouldHideColorArea,\n    shouldShowTransparencySlider,\n    shouldUseSiteColors,\n    alignment,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopup\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                shouldHideColorArea={shouldHideColorArea}\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldHideColorArea,\n            shouldHideDefaultPresetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n            shouldUseSiteColors,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content} alignment={alignment}>\n                    {children ?? (\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                    )}\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"AAAA,SAASA,KAAK,QAAwB,yBAAyB;AAC/D,OAAOC,KAAK,IAAeC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAE7D,OAAOC,gBAAgB,MAAM,2CAA2C;AACxE,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SACIC,wBAAwB,EACxBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,wCAAwC,EACxCC,gCAAgC,QAC7B,6BAA6B;AAmBpC,MAAMC,kBAAkB,GAAGA,CAAC;EACxBC,QAAQ;EACRC,gBAAgB;EAChBC,mBAAmB;EACnBC,YAAY;EACZC,iBAAiB;EACjBC,qBAAqB;EACrBC,6BAA6B;EAC7BC,sBAAsB;EACtBC,4BAA4B;EAC5BC,2BAA2B;EAC3BC,mBAAmB;EACnBC,4BAA4B;EAC5BC,mBAAmB;EACnBC;AACqB,CAAC,KAAK;EAC3B,MAAM;IAAEC;EAAc,CAAC,GAAGxB,UAAU,CAACG,kBAAkB,CAAC;EAExD,MAAMsB,OAAO,GAAGxB,OAAO,CACnB,mBACIF,KAAA,CAAA2B,aAAA,CAACxB,gBAAgB;IACbc,6BAA6B,EAAEA,6BAA8B;IAC7DI,mBAAmB,EAAEA,mBAAoB;IACzCH,sBAAsB,EAAEA,sBAAuB;IAC/CL,mBAAmB,EAAEA,mBAAoB;IACzCD,gBAAgB,EAAEA,gBAAiB;IACnCE,YAAY,EAAEA,YAAa;IAC3BS,mBAAmB,EAAEA,mBAAoB;IACzCP,qBAAqB,EAAEA,qBAAsB;IAC7CM,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACD,CACIV,gBAAgB,EAChBC,mBAAmB,EACnBC,YAAY,EACZO,mBAAmB,EACnBJ,6BAA6B,EAC7BD,qBAAqB,EACrBE,sBAAsB,EACtBI,4BAA4B,EAC5BC,mBAAmB,CAE3B,CAAC;EAED,oBACIvB,KAAA,CAAA2B,aAAA,CAACtB,wBAAwB,QACpBU,iBAAiB,gBACdf,KAAA,CAAA2B,aAAA,CAAC5B,KAAK;IAAC2B,OAAO,EAAEA,OAAQ;IAACF,SAAS,EAAEA;EAAU,GACzCb,QAAQ,iBACLX,KAAA,CAAA2B,aAAA,CAACrB,4BAA4B,qBACzBN,KAAA,CAAA2B,aAAA,CAACnB,wCAAwC;IACrCoB,4BAA4B,EAAER;EAA4B,gBAE1DpB,KAAA,CAAA2B,aAAA,CAACpB,iCAAiC;IAACsB,MAAM,EAAEJ;EAAc,CAAE,CACrB,CAAC,EAE1CN,4BAA4B,iBACzBnB,KAAA,CAAA2B,aAAA,CAAClB,gCAAgC,QAC5BgB,aAC6B,CAEZ,CAE/B,CAAC,GAERC,OAEkB,CAAC;AAEnC,CAAC;AAEDhB,kBAAkB,CAACoB,WAAW,GAAG,oBAAoB;AAErD,eAAepB,kBAAkB","ignoreList":[]}
+{"version":3,"file":"ColorPickerWrapper.js","names":["Popup","React","useContext","useMemo","ColorPickerPopupContent","ColorPickerContext","StyledColorPickerWrapper","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","StyledColorPickerWrapperInfoColorWrapper","StyledColorPickerWrapperInfoText","ColorPickerWrapper","children","onPresetColorAdd","onPresetColorRemove","presetColors","shouldShowAsPopup","shouldShowMoreOptions","shouldHideDefaultPresetColors","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldHideColorArea","shouldShowTransparencySlider","shouldUseSiteColors","alignment","shouldEnableKeyboardHighlighting","selectedColor","content","createElement","$shouldShowRoundPreviewColor","$color","displayName"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup, PopupAlignment } from '@chayns-components/core';\nimport React, { ReactNode, useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport { ColorPickerPopupContent } 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    children?: ReactNode;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    presetColors?: IPresetColor[];\n    shouldShowAsPopup: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowPresetColors: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n    shouldShowTransparencySlider: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    alignment?: PopupAlignment;\n    shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst ColorPickerWrapper = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    presetColors,\n    shouldShowAsPopup,\n    shouldShowMoreOptions,\n    shouldHideDefaultPresetColors,\n    shouldShowPresetColors,\n    shouldShowPreviewColorString,\n    shouldShowRoundPreviewColor,\n    shouldHideColorArea,\n    shouldShowTransparencySlider,\n    shouldUseSiteColors,\n    alignment,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopupContent\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                shouldHideColorArea={shouldHideColorArea}\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldHideColorArea,\n            shouldHideDefaultPresetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n            shouldUseSiteColors,\n            shouldEnableKeyboardHighlighting,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content} alignment={alignment}>\n                    {children ?? (\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                    )}\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"AAAA,SAASA,KAAK,QAAwB,yBAAyB;AAC/D,OAAOC,KAAK,IAAeC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAE7D,SAASC,uBAAuB,QAAQ,2CAA2C;AACnF,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SACIC,wBAAwB,EACxBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,wCAAwC,EACxCC,gCAAgC,QAC7B,6BAA6B;AAoBpC,MAAMC,kBAAkB,GAAGA,CAAC;EACxBC,QAAQ;EACRC,gBAAgB;EAChBC,mBAAmB;EACnBC,YAAY;EACZC,iBAAiB;EACjBC,qBAAqB;EACrBC,6BAA6B;EAC7BC,sBAAsB;EACtBC,4BAA4B;EAC5BC,2BAA2B;EAC3BC,mBAAmB;EACnBC,4BAA4B;EAC5BC,mBAAmB;EACnBC,SAAS;EACTC;AACqB,CAAC,KAAK;EAC3B,MAAM;IAAEC;EAAc,CAAC,GAAGzB,UAAU,CAACG,kBAAkB,CAAC;EAExD,MAAMuB,OAAO,GAAGzB,OAAO,CACnB,mBACIF,KAAA,CAAA4B,aAAA,CAACzB,uBAAuB;IACpBc,6BAA6B,EAAEA,6BAA8B;IAC7DI,mBAAmB,EAAEA,mBAAoB;IACzCH,sBAAsB,EAAEA,sBAAuB;IAC/CL,mBAAmB,EAAEA,mBAAoB;IACzCD,gBAAgB,EAAEA,gBAAiB;IACnCE,YAAY,EAAEA,YAAa;IAC3BS,mBAAmB,EAAEA,mBAAoB;IACzCP,qBAAqB,EAAEA,qBAAsB;IAC7CM,4BAA4B,EAAEA,4BAA6B;IAC3DG,gCAAgC,EAAEA;EAAiC,CACtE,CACJ,EACD,CACIb,gBAAgB,EAChBC,mBAAmB,EACnBC,YAAY,EACZO,mBAAmB,EACnBJ,6BAA6B,EAC7BD,qBAAqB,EACrBE,sBAAsB,EACtBI,4BAA4B,EAC5BC,mBAAmB,EACnBE,gCAAgC,CAExC,CAAC;EAED,oBACIzB,KAAA,CAAA4B,aAAA,CAACvB,wBAAwB,QACpBU,iBAAiB,gBACdf,KAAA,CAAA4B,aAAA,CAAC7B,KAAK;IAAC4B,OAAO,EAAEA,OAAQ;IAACH,SAAS,EAAEA;EAAU,GACzCb,QAAQ,iBACLX,KAAA,CAAA4B,aAAA,CAACtB,4BAA4B,qBACzBN,KAAA,CAAA4B,aAAA,CAACpB,wCAAwC;IACrCqB,4BAA4B,EAAET;EAA4B,gBAE1DpB,KAAA,CAAA4B,aAAA,CAACrB,iCAAiC;IAACuB,MAAM,EAAEJ;EAAc,CAAE,CACrB,CAAC,EAE1CP,4BAA4B,iBACzBnB,KAAA,CAAA4B,aAAA,CAACnB,gCAAgC,QAC5BiB,aAC6B,CAEZ,CAE/B,CAAC,GAERC,OAEkB,CAAC;AAEnC,CAAC;AAEDjB,kBAAkB,CAACqB,WAAW,GAAG,oBAAoB;AAErD,eAAerB,kBAAkB","ignoreList":[]}

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

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import ColorPickerProvider from '../ColorPickerProvider';
 import ColorArea from './color-area/ColorArea';
 import { StyledColorPickerPopup } from './ColorPickerPopup.styles';
 import MoreOptions from './more-options/MoreOptions';
 import PresetColors from './preset-colors/PresetColors';
 import Sliders from './sliders/Sliders';
 import { TextstringProvider } from '@chayns-components/textstring';
-const ColorPickerPopup = ({
+export const ColorPickerPopupContent = ({
   presetColors,
   onPresetColorRemove,
   onPresetColorAdd,
@@ -14,18 +15,45 @@ const ColorPickerPopup = ({
   shouldHideDefaultPresetColors,
   shouldUseSiteColors,
   shouldShowMoreOptions,
-  shouldHideColorArea
-}) => /*#__PURE__*/React.createElement(StyledColorPickerPopup, null, !shouldHideColorArea && /*#__PURE__*/React.createElement(ColorArea, null), !shouldHideColorArea && /*#__PURE__*/React.createElement(Sliders, {
-  shouldShowTransparencySlider: shouldShowTransparencySlider
-}), shouldShowPresetColors && /*#__PURE__*/React.createElement(PresetColors, {
-  shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
-  presetColors: presetColors,
-  shouldUseSiteColors: shouldUseSiteColors,
-  onPresetColorAdd: onPresetColorAdd,
-  onPresetColorRemove: onPresetColorRemove
-}), shouldShowMoreOptions && /*#__PURE__*/React.createElement(TextstringProvider, {
-  libraryName: "@chayns-components-color-picker"
-}, /*#__PURE__*/React.createElement(MoreOptions, null)));
+  shouldHideColorArea,
+  shouldEnableKeyboardHighlighting
+}) => {
+  const popupRef = useRef(null);
+  useEffect(() => {
+    const animationFrameId = window.requestAnimationFrame(() => {
+      popupRef.current?.querySelector('[tabindex="0"], input:not([disabled]), button:not([disabled])')?.focus();
+    });
+    return () => window.cancelAnimationFrame(animationFrameId);
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledColorPickerPopup, {
+    ref: popupRef
+  }, !shouldHideColorArea && /*#__PURE__*/React.createElement(ColorArea, {
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }), !shouldHideColorArea && /*#__PURE__*/React.createElement(Sliders, {
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+    shouldShowTransparencySlider: shouldShowTransparencySlider
+  }), shouldShowPresetColors && /*#__PURE__*/React.createElement(PresetColors, {
+    shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
+    presetColors: presetColors,
+    shouldUseSiteColors: shouldUseSiteColors,
+    onPresetColorAdd: onPresetColorAdd,
+    onPresetColorRemove: onPresetColorRemove,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }), shouldShowMoreOptions && /*#__PURE__*/React.createElement(TextstringProvider, {
+    libraryName: "@chayns-components-color-picker"
+  }, /*#__PURE__*/React.createElement(MoreOptions, {
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  })));
+};
+ColorPickerPopupContent.displayName = 'ColorPickerPopupContent';
+const ColorPickerPopup = ({
+  onSelect,
+  selectedColor = 'rgba(0, 94, 184, 1)',
+  ...props
+}) => /*#__PURE__*/React.createElement(ColorPickerProvider, {
+  onSelect: onSelect,
+  selectedColor: selectedColor
+}, /*#__PURE__*/React.createElement(ColorPickerPopupContent, props));
 ColorPickerPopup.displayName = 'ColorPickerPopup';
 export default ColorPickerPopup;
 //# sourceMappingURL=ColorPickerPopup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.js","names":["React","ColorArea","StyledColorPickerPopup","MoreOptions","PresetColors","Sliders","TextstringProvider","ColorPickerPopup","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","createElement","libraryName","displayName"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\ninterface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n}\n\nconst ColorPickerPopup = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n}: ColorPickerPopupProps) => (\n    <StyledColorPickerPopup>\n        {!shouldHideColorArea && <ColorArea />}\n        {!shouldHideColorArea && (\n            <Sliders shouldShowTransparencySlider={shouldShowTransparencySlider} />\n        )}\n        {shouldShowPresetColors && (\n            <PresetColors\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                presetColors={presetColors}\n                shouldUseSiteColors={shouldUseSiteColors}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n            />\n        )}\n        {shouldShowMoreOptions && (\n            <TextstringProvider libraryName=\"@chayns-components-color-picker\">\n                <MoreOptions />\n            </TextstringProvider>\n        )}\n    </StyledColorPickerPopup>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SAASC,kBAAkB,QAAQ,+BAA+B;AAclE,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,6BAA6B;EAC7BC,mBAAmB;EACnBC,qBAAqB;EACrBC;AACmB,CAAC,kBACpBhB,KAAA,CAAAiB,aAAA,CAACf,sBAAsB,QAClB,CAACc,mBAAmB,iBAAIhB,KAAA,CAAAiB,aAAA,CAAChB,SAAS,MAAE,CAAC,EACrC,CAACe,mBAAmB,iBACjBhB,KAAA,CAAAiB,aAAA,CAACZ,OAAO;EAACO,4BAA4B,EAAEA;AAA6B,CAAE,CACzE,EACAD,sBAAsB,iBACnBX,KAAA,CAAAiB,aAAA,CAACb,YAAY;EACTS,6BAA6B,EAAEA,6BAA8B;EAC7DL,YAAY,EAAEA,YAAa;EAC3BM,mBAAmB,EAAEA,mBAAoB;EACzCJ,gBAAgB,EAAEA,gBAAiB;EACnCD,mBAAmB,EAAEA;AAAoB,CAC5C,CACJ,EACAM,qBAAqB,iBAClBf,KAAA,CAAAiB,aAAA,CAACX,kBAAkB;EAACY,WAAW,EAAC;AAAiC,gBAC7DlB,KAAA,CAAAiB,aAAA,CAACd,WAAW,MAAE,CACE,CAEJ,CAC3B;AAEDI,gBAAgB,CAACY,WAAW,GAAG,kBAAkB;AAEjD,eAAeZ,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ColorPickerPopup.js","names":["React","useEffect","useRef","ColorPickerProvider","ColorArea","StyledColorPickerPopup","MoreOptions","PresetColors","Sliders","TextstringProvider","ColorPickerPopupContent","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","shouldEnableKeyboardHighlighting","popupRef","animationFrameId","window","requestAnimationFrame","current","querySelector","focus","cancelAnimationFrame","createElement","ref","libraryName","displayName","ColorPickerPopup","onSelect","selectedColor","props"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport interface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    selectedColor?: string;\n    onSelect?: (color: string) => void;\n}\n\ntype ColorPickerPopupContentProps = Omit<ColorPickerPopupProps, 'onSelect' | 'selectedColor'>;\n\nexport const ColorPickerPopupContent = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerPopupContentProps) => {\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const animationFrameId = window.requestAnimationFrame(() => {\n            popupRef.current\n                ?.querySelector<HTMLElement>(\n                    '[tabindex=\"0\"], input:not([disabled]), button:not([disabled])',\n                )\n                ?.focus();\n        });\n\n        return () => window.cancelAnimationFrame(animationFrameId);\n    }, []);\n\n    return (\n        <StyledColorPickerPopup ref={popupRef}>\n            {!shouldHideColorArea && (\n                <ColorArea shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting} />\n            )}\n            {!shouldHideColorArea && (\n                <Sliders\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    shouldShowTransparencySlider={shouldShowTransparencySlider}\n                />\n            )}\n            {shouldShowPresetColors && (\n                <PresetColors\n                    shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                    presetColors={presetColors}\n                    shouldUseSiteColors={shouldUseSiteColors}\n                    onPresetColorAdd={onPresetColorAdd}\n                    onPresetColorRemove={onPresetColorRemove}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                />\n            )}\n            {shouldShowMoreOptions && (\n                <TextstringProvider libraryName=\"@chayns-components-color-picker\">\n                    <MoreOptions\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    />\n                </TextstringProvider>\n            )}\n        </StyledColorPickerPopup>\n    );\n};\n\nColorPickerPopupContent.displayName = 'ColorPickerPopupContent';\n\nconst ColorPickerPopup = ({\n    onSelect,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    ...props\n}: ColorPickerPopupProps) => (\n    <ColorPickerProvider onSelect={onSelect} selectedColor={selectedColor}>\n        <ColorPickerPopupContent {...props} />\n    </ColorPickerProvider>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,OAAOC,mBAAmB,MAAM,wBAAwB;AACxD,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SAASC,kBAAkB,QAAQ,+BAA+B;AAmBlE,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACpCC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,6BAA6B;EAC7BC,mBAAmB;EACnBC,qBAAqB;EACrBC,mBAAmB;EACnBC;AAC0B,CAAC,KAAK;EAChC,MAAMC,QAAQ,GAAGnB,MAAM,CAAiB,IAAI,CAAC;EAE7CD,SAAS,CAAC,MAAM;IACZ,MAAMqB,gBAAgB,GAAGC,MAAM,CAACC,qBAAqB,CAAC,MAAM;MACxDH,QAAQ,CAACI,OAAO,EACVC,aAAa,CACX,+DACJ,CAAC,EACCC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,MAAMJ,MAAM,CAACK,oBAAoB,CAACN,gBAAgB,CAAC;EAC9D,CAAC,EAAE,EAAE,CAAC;EAEN,oBACItB,KAAA,CAAA6B,aAAA,CAACxB,sBAAsB;IAACyB,GAAG,EAAET;EAAS,GACjC,CAACF,mBAAmB,iBACjBnB,KAAA,CAAA6B,aAAA,CAACzB,SAAS;IAACgB,gCAAgC,EAAEA;EAAiC,CAAE,CACnF,EACA,CAACD,mBAAmB,iBACjBnB,KAAA,CAAA6B,aAAA,CAACrB,OAAO;IACJY,gCAAgC,EAAEA,gCAAiC;IACnEL,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACAD,sBAAsB,iBACnBd,KAAA,CAAA6B,aAAA,CAACtB,YAAY;IACTS,6BAA6B,EAAEA,6BAA8B;IAC7DL,YAAY,EAAEA,YAAa;IAC3BM,mBAAmB,EAAEA,mBAAoB;IACzCJ,gBAAgB,EAAEA,gBAAiB;IACnCD,mBAAmB,EAAEA,mBAAoB;IACzCQ,gCAAgC,EAAEA;EAAiC,CACtE,CACJ,EACAF,qBAAqB,iBAClBlB,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IAACsB,WAAW,EAAC;EAAiC,gBAC7D/B,KAAA,CAAA6B,aAAA,CAACvB,WAAW;IACRc,gCAAgC,EAAEA;EAAiC,CACtE,CACe,CAEJ,CAAC;AAEjC,CAAC;AAEDV,uBAAuB,CAACsB,WAAW,GAAG,yBAAyB;AAE/D,MAAMC,gBAAgB,GAAGA,CAAC;EACtBC,QAAQ;EACRC,aAAa,GAAG,qBAAqB;EACrC,GAAGC;AACgB,CAAC,kBACpBpC,KAAA,CAAA6B,aAAA,CAAC1B,mBAAmB;EAAC+B,QAAQ,EAAEA,QAAS;EAACC,aAAa,EAAEA;AAAc,gBAClEnC,KAAA,CAAA6B,aAAA,CAACnB,uBAAuB,EAAK0B,KAAQ,CACpB,CACxB;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}

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

@@ -5,8 +5,11 @@ import { setRefreshScrollEnabled } from 'chayns-api';
 import { useDragControls, useMotionValue } from 'motion/react';
 import { extractRgbValues, getColorFromCoordinates, getCoordinatesFromColor, rgbToHsv } from '../../../utils/color';
 import { ColorPickerContext } from '../../ColorPickerProvider';
-import { useIsMeasuredClone } from '@chayns-components/core';
-const ColorArea = () => {
+import { useFocusRingPortal, useIsMeasuredClone, useKeyboardFocusHighlighting } from '@chayns-components/core';
+import { useColorAreaKeyboardNavigation } from '../../../hooks/useColorAreaKeyboardNavigation';
+const ColorArea = ({
+  shouldEnableKeyboardHighlighting
+}) => {
   const {
     selectedColor,
     updateSelectedColor,
@@ -28,10 +31,18 @@ const ColorArea = () => {
   const canDrag = useRef(false);
   const canvasRef = useRef(null);
   const pseudoRef = useRef(null);
+  const pointerRef = useRef(null);
   const [shouldPreventListener, ref] = useIsMeasuredClone();
   const dragControls = useDragControls();
   const x = useMotionValue(0);
   const y = useMotionValue(0);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(pseudoRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: pointerRef,
+    shape: 'circle',
+    padding: 3
+  });
   useEffect(() => {
     isPresetColorRef.current = isPresetColor ?? false;
   }, [isPresetColor]);
@@ -221,6 +232,13 @@ const ColorArea = () => {
     window.addEventListener('pointerup', endTouching);
     window.addEventListener('touchend', endTouching);
   }, [handleMouseMove, handlePointerUp, handleTouchMove, shouldPreventListener, updateShouldGetCoordinates]);
+  const handleKeyDown = useColorAreaKeyboardNavigation({
+    move,
+    onChangeEnd: () => updateShouldCallOnSelect?.(true),
+    onChangeStart: () => updateShouldGetCoordinates?.(false),
+    x,
+    y
+  });
   return useMemo(() => /*#__PURE__*/React.createElement(StyledColorArea, {
     ref: ref
   }, /*#__PURE__*/React.createElement(StyledColorAreaCanvas, {
@@ -228,8 +246,12 @@ const ColorArea = () => {
   }), /*#__PURE__*/React.createElement(StyledColorAreaPseudo, {
     ref: pseudoRef,
     onPointerDown: handleStartDrag,
-    onClick: handleClick
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    role: "slider",
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement(StyledMotionColorAreaPointer, {
+    ref: pointerRef,
     drag: true,
     dragConstraints: pseudoRef,
     style: {

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

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

@@ -12,6 +12,7 @@ export const StyledColorAreaCanvas = styled.canvas`
     user-select: none;
 `;
 export const StyledColorAreaPseudo = styled.div`
+    outline: none;
     position: absolute;
     top: -10px;
     left: -10px;