@chayns-components/color-picker 5.5.30 → 5.5.34

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

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

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

@@ -1,12 +1,14 @@
-import { Accordion, AccordionGroup, AreaContext } from '@chayns-components/core';
+import { Accordion, AccordionGroup, AreaContext, useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';
 import { isHex } from '@chayns/colors';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';
 import { ColorPickerContext } from '../../ColorPickerProvider';
 import { StyledMoreOptions, StyledMoreOptionsInput, StyledMoreOptionsInputWrapper } from './MoreOptions.styles';
 import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
 import textStrings from '../../../constants/textStrings';
-const MoreOptions = () => {
+const MoreOptions = ({
+  shouldEnableKeyboardHighlighting
+}) => {
   const {
     selectedColor,
     updateSelectedColor,
@@ -17,6 +19,30 @@ const MoreOptions = () => {
   const [tmpRgbValue, setTmpRgbValue] = useState('');
   const [isHexInvalid, setIsHexInvalid] = useState(false);
   const [isRgbInvalid, setIsRgbInvalid] = useState(false);
+  const [areInputsMounted, setAreInputsMounted] = useState(false);
+  const hexInputRef = useRef(null);
+  const rgbInputRef = useRef(null);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(hexInputRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    updateKey: areInputsMounted
+  });
+  useFocusRingPortal(rgbInputRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    updateKey: areInputsMounted
+  });
+  const setHexInputRef = useCallback(element => {
+    hexInputRef.current = element;
+    if (element) {
+      setAreInputsMounted(true);
+    }
+  }, []);
+  const setRgbInputRef = useCallback(element => {
+    rgbInputRef.current = element;
+    if (element) {
+      setAreInputsMounted(true);
+    }
+  }, []);
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   const handleHexChange = event => {
     setTmpHexValue(event.target.value);
@@ -71,11 +97,13 @@ const MoreOptions = () => {
   }, /*#__PURE__*/React.createElement(Accordion, {
     title: title
   }, /*#__PURE__*/React.createElement(StyledMoreOptionsInputWrapper, null, /*#__PURE__*/React.createElement(StyledMoreOptionsInput, {
+    ref: setHexInputRef,
     $shouldChangeColor: shouldChangeColor,
     value: tmpHexValue,
     onChange: handleHexChange,
     $isInvalid: isHexInvalid
   }), /*#__PURE__*/React.createElement(StyledMoreOptionsInput, {
+    ref: setRgbInputRef,
     $shouldChangeColor: shouldChangeColor,
     value: tmpRgbValue,
     onChange: handleRgbChange,

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

@@ -1 +1 @@
-{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","AreaContext","isHex","React","useContext","useEffect","useMemo","useState","extractRgbValues","hexToRgb","isValidRGBA","rgbToHex","ColorPickerContext","StyledMoreOptions","StyledMoreOptionsInput","StyledMoreOptionsInputWrapper","ttsToITextString","useTextstringValue","textStrings","MoreOptions","selectedColor","updateSelectedColor","updateShouldCallOnSelect","areaProvider","tmpHexValue","setTmpHexValue","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","shouldChangeColor","handleHexChange","event","target","value","isValid","r","g","b","a","handleRgbChange","title","textstring","components","colorPickerPopup","moreOptions","accordionTitle","createElement","isWrapped","$shouldChangeColor","onChange","$isInvalid","displayName"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import { Accordion, AccordionGroup, AreaContext } from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, { type ChangeEvent, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledMoreOptions,\n    StyledMoreOptionsInput,\n    StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\nconst MoreOptions = () => {\n    const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n        useContext(ColorPickerContext);\n    const areaProvider = useContext(AreaContext);\n\n    const [tmpHexValue, setTmpHexValue] = useState('');\n    const [tmpRgbValue, setTmpRgbValue] = useState('');\n    const [isHexInvalid, setIsHexInvalid] = useState(false);\n    const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpHexValue(event.target.value);\n\n        const isValid = isHex(event.target.value);\n\n        setIsHexInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            const { r, g, b, a } = hexToRgb(event.target.value);\n\n            updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpRgbValue(event.target.value);\n\n        const isValid = isValidRGBA(event.target.value);\n\n        setIsRgbInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            updateSelectedColor(event.target.value);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    useEffect(() => {\n        if (selectedColor) {\n            if (isValidRGBA(selectedColor)) {\n                setTmpRgbValue(selectedColor);\n                setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n            } else {\n                const { r, g, b, a } = hexToRgb(selectedColor);\n\n                setTmpRgbValue(`rgba(${r},${g},${b},${a})`);\n                setTmpHexValue(selectedColor);\n            }\n        }\n    }, [selectedColor]);\n\n    const title = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.colorPickerPopup.moreOptions.accordionTitle,\n        ),\n    });\n\n    return (\n        <StyledMoreOptions>\n            <AccordionGroup isWrapped>\n                <Accordion title={title}>\n                    <StyledMoreOptionsInputWrapper>\n                        <StyledMoreOptionsInput\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpHexValue}\n                            onChange={handleHexChange}\n                            $isInvalid={isHexInvalid}\n                        />\n                        <StyledMoreOptionsInput\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpRgbValue}\n                            onChange={handleRgbChange}\n                            $isInvalid={isRgbInvalid}\n                        />\n                    </StyledMoreOptionsInputWrapper>\n                </Accordion>\n            </AccordionGroup>\n        </StyledMoreOptions>\n    );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","AreaContext","useFocusRingPortal","useKeyboardFocusHighlighting","isHex","React","useCallback","useContext","useEffect","useMemo","useRef","useState","extractRgbValues","hexToRgb","isValidRGBA","rgbToHex","ColorPickerContext","StyledMoreOptions","StyledMoreOptionsInput","StyledMoreOptionsInputWrapper","ttsToITextString","useTextstringValue","textStrings","MoreOptions","shouldEnableKeyboardHighlighting","selectedColor","updateSelectedColor","updateShouldCallOnSelect","areaProvider","tmpHexValue","setTmpHexValue","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","areInputsMounted","setAreInputsMounted","hexInputRef","rgbInputRef","shouldShowKeyboardHighlighting","isEnabled","updateKey","setHexInputRef","element","current","setRgbInputRef","shouldChangeColor","handleHexChange","event","target","value","isValid","r","g","b","a","handleRgbChange","title","textstring","components","colorPickerPopup","moreOptions","accordionTitle","createElement","isWrapped","ref","$shouldChangeColor","onChange","$isInvalid","displayName"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import {\n    Accordion,\n    AccordionGroup,\n    AreaContext,\n    useFocusRingPortal,\n    useKeyboardFocusHighlighting,\n} from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, {\n    type ChangeEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n    StyledMoreOptions,\n    StyledMoreOptionsInput,\n    StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\ntype MoreOptionsProps = {\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst MoreOptions = ({ shouldEnableKeyboardHighlighting }: MoreOptionsProps) => {\n    const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n        useContext(ColorPickerContext);\n    const areaProvider = useContext(AreaContext);\n\n    const [tmpHexValue, setTmpHexValue] = useState('');\n    const [tmpRgbValue, setTmpRgbValue] = useState('');\n    const [isHexInvalid, setIsHexInvalid] = useState(false);\n    const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n    const [areInputsMounted, setAreInputsMounted] = useState(false);\n    const hexInputRef = useRef<HTMLInputElement | null>(null);\n    const rgbInputRef = useRef<HTMLInputElement | null>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(hexInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n    useFocusRingPortal(rgbInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        updateKey: areInputsMounted,\n    });\n\n    const setHexInputRef = useCallback((element: HTMLInputElement | null) => {\n        hexInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const setRgbInputRef = useCallback((element: HTMLInputElement | null) => {\n        rgbInputRef.current = element;\n\n        if (element) {\n            setAreInputsMounted(true);\n        }\n    }, []);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpHexValue(event.target.value);\n\n        const isValid = isHex(event.target.value);\n\n        setIsHexInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            const { r, g, b, a } = hexToRgb(event.target.value);\n\n            updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpRgbValue(event.target.value);\n\n        const isValid = isValidRGBA(event.target.value);\n\n        setIsRgbInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            updateSelectedColor(event.target.value);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    useEffect(() => {\n        if (selectedColor) {\n            if (isValidRGBA(selectedColor)) {\n                setTmpRgbValue(selectedColor);\n                setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n            } else {\n                const { r, g, b, a } = hexToRgb(selectedColor);\n\n                setTmpRgbValue(`rgba(${r},${g},${b},${a})`);\n                setTmpHexValue(selectedColor);\n            }\n        }\n    }, [selectedColor]);\n\n    const title = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.colorPickerPopup.moreOptions.accordionTitle,\n        ),\n    });\n\n    return (\n        <StyledMoreOptions>\n            <AccordionGroup isWrapped>\n                <Accordion title={title}>\n                    <StyledMoreOptionsInputWrapper>\n                        <StyledMoreOptionsInput\n                            ref={setHexInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpHexValue}\n                            onChange={handleHexChange}\n                            $isInvalid={isHexInvalid}\n                        />\n                        <StyledMoreOptionsInput\n                            ref={setRgbInputRef}\n                            $shouldChangeColor={shouldChangeColor}\n                            value={tmpRgbValue}\n                            onChange={handleRgbChange}\n                            $isInvalid={isRgbInvalid}\n                        />\n                    </StyledMoreOptionsInputWrapper>\n                </Accordion>\n            </AccordionGroup>\n        </StyledMoreOptions>\n    );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}

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

@@ -24,5 +24,6 @@ export const StyledMoreOptionsInput = styled.input`
 }) => $isInvalid ? theme.wrong : theme.text};
     padding: 8px 10px;
     font-size: 11px;
+    outline: none;
 `;
 //# sourceMappingURL=MoreOptions.styles.js.map

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

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

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

@@ -8,17 +8,20 @@ import { ColorPickerContext } from '../../ColorPickerProvider';
 import PresetButton from './preset-button/PresetButton';
 import PresetColor from './preset-color/PresetColor';
 import { StyledPresetColors } from './PresetColors.styles';
+import { usePresetColorKeyboardNavigation } from '../../../hooks/usePresetColorKeyboardNavigation';
 const PresetColors = ({
   presetColors,
   onPresetColorRemove,
   onPresetColorAdd,
   shouldUseSiteColors,
-  shouldHideDefaultPresetColors
+  shouldHideDefaultPresetColors,
+  shouldEnableKeyboardHighlighting
 }) => {
   const {
     selectedColor
   } = useContext(ColorPickerContext);
   const [siteColors, setSiteColors] = useState(undefined);
+  const [focusedPresetIndex, setFocusedPresetIndex] = useState(0);
   const loadSiteColors = async presetColorId => {
     const colors = await getSiteColors();
     setSiteColors(prevColors => {
@@ -97,14 +100,21 @@ const PresetColors = ({
     combinedColors.forEach(({
       color,
       id
-    }) => {
+    }, index) => {
       items.push(/*#__PURE__*/React.createElement(PresetColor, {
         key: `preset-color__${id}`,
-        color: color
+        color: color,
+        isKeyboardFocusable: index === focusedPresetIndex,
+        onFocus: () => setFocusedPresetIndex(index),
+        presetIndex: index,
+        shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
       }));
     });
     return items;
-  }, [combinedColors]);
+  }, [combinedColors, focusedPresetIndex, shouldEnableKeyboardHighlighting]);
+  const handlePresetColorsKeyDown = usePresetColorKeyboardNavigation({
+    onFocusChange: setFocusedPresetIndex
+  });
   const currentPresetColor = useMemo(() => combinedColors.find(({
     color
   }) => color === selectedColor), [combinedColors, selectedColor]);
@@ -130,11 +140,17 @@ const PresetColors = ({
       onPresetColorRemove(presetColorId);
     }
   };
-  return /*#__PURE__*/React.createElement(StyledPresetColors, null, content, !shouldHideDefaultPresetColors && /*#__PURE__*/React.createElement(PresetButton, {
+  return /*#__PURE__*/React.createElement(StyledPresetColors, {
+    onKeyDown: handlePresetColorsKeyDown
+  }, content, !shouldHideDefaultPresetColors && /*#__PURE__*/React.createElement(PresetButton, {
     id: currentPresetColor?.id,
     isCustom: currentPresetColor?.isCustom,
+    isKeyboardFocusable: focusedPresetIndex === combinedColors.length,
     onAdd: handleAddColor,
-    onRemove: handleRemoveColor
+    onFocus: () => setFocusedPresetIndex(combinedColors.length),
+    onRemove: handleRemoveColor,
+    presetIndex: combinedColors.length,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }));
 };
 PresetColors.displayName = 'PresetColors';

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.js","names":["isHex","React","useContext","useEffect","useMemo","useState","putSiteColors","getSiteColors","PRESETCOLORS","extractRgbValues","hexToRgb","rgbToHex","ColorPickerContext","PresetButton","PresetColor","StyledPresetColors","PresetColors","presetColors","onPresetColorRemove","onPresetColorAdd","shouldUseSiteColors","shouldHideDefaultPresetColors","selectedColor","siteColors","setSiteColors","undefined","loadSiteColors","presetColorId","colors","prevColors","newColors","value","map","color","r","g","b","a","newColor","id","Math","random","toString","isCustom","deletedColor","find","filteredColors","filter","formattedColors","rgbValues","combinedColors","tmp","content","items","forEach","push","createElement","key","currentPresetColor","handleAddColor","presetColor","handleRemoveColor","onAdd","onRemove","displayName"],"sources":["../../../../../src/components/color-picker-popup/preset-colors/PresetColors.tsx"],"sourcesContent":["import { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ReactElement } from 'react';\n\nimport { putSiteColors } from '../../../api/color/get';\nimport { getSiteColors } from '../../../api/color/put';\nimport { PRESETCOLORS } from '../../../constants/color';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport { extractRgbValues, hexToRgb, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport PresetButton from './preset-button/PresetButton';\nimport PresetColor from './preset-color/PresetColor';\nimport { StyledPresetColors } from './PresetColors.styles';\n\ninterface PresetColorsProps {\n    presetColors?: IPresetColor[];\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldUseSiteColors: boolean;\n    shouldHideDefaultPresetColors: boolean;\n}\n\nconst PresetColors = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldUseSiteColors,\n    shouldHideDefaultPresetColors,\n}: PresetColorsProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const [siteColors, setSiteColors] = useState<IPresetColor[] | undefined>(undefined);\n\n    const loadSiteColors = async (presetColorId?: IPresetColor['id']) => {\n        const colors = await getSiteColors();\n\n        setSiteColors((prevColors) => {\n            const newColors = colors.value.map((color) => {\n                const { r, g, b, a } = hexToRgb(color);\n\n                const newColor = `rgba(${r},${g},${b},${a})`;\n\n                return {\n                    color: newColor,\n                    id: Math.random().toString(),\n                    isCustom: true,\n                };\n            });\n\n            if (!presetColorId) {\n                return newColors;\n            }\n\n            const deletedColor = prevColors?.find(({ id }) => id === presetColorId)?.color;\n\n            if (!deletedColor) {\n                return newColors;\n            }\n\n            const filteredColors = newColors?.filter(({ color }) => color !== deletedColor);\n\n            const formattedColors = filteredColors?.map(({ color }) => {\n                const rgbValues = extractRgbValues(color);\n\n                return rgbToHex(rgbValues);\n            });\n\n            void putSiteColors(formattedColors ?? []);\n\n            return filteredColors;\n        });\n    };\n\n    useEffect(() => {\n        if (!shouldUseSiteColors) {\n            setSiteColors(undefined);\n\n            return;\n        }\n\n        void loadSiteColors();\n    }, [shouldUseSiteColors]);\n\n    const combinedColors = useMemo(() => {\n        const tmp = (presetColors ?? []).map(({ color, isCustom, id }) => {\n            let newColor = color;\n\n            if (isHex(color)) {\n                const { r, g, b, a } = hexToRgb(color);\n\n                newColor = `rgba(${r},${g},${b},${a})`;\n            }\n\n            return {\n                id,\n                isCustom,\n                color: newColor,\n            };\n        });\n\n        if (shouldHideDefaultPresetColors) {\n            return tmp;\n        }\n\n        return [...PRESETCOLORS, ...(siteColors ?? []), ...tmp];\n    }, [presetColors, shouldHideDefaultPresetColors, siteColors]);\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        combinedColors.forEach(({ color, id }) => {\n            items.push(<PresetColor key={`preset-color__${id}`} color={color} />);\n        });\n\n        return items;\n    }, [combinedColors]);\n\n    const currentPresetColor = useMemo(\n        () => combinedColors.find(({ color }) => color === selectedColor),\n        [combinedColors, selectedColor],\n    );\n\n    const handleAddColor = (presetColor: IPresetColor) => {\n        if (typeof onPresetColorAdd === 'function') {\n            onPresetColorAdd(presetColor);\n        }\n\n        setSiteColors((prevColors) => {\n            const colors = [...(prevColors ?? []), presetColor];\n\n            const newColors = colors?.map(({ color }) => {\n                const rgbValues = extractRgbValues(color);\n\n                return rgbToHex(rgbValues);\n            });\n\n            void putSiteColors(newColors);\n\n            return colors;\n        });\n    };\n\n    const handleRemoveColor = (presetColorId: IPresetColor['id']) => {\n        void loadSiteColors(presetColorId);\n\n        if (typeof onPresetColorRemove === 'function') {\n            onPresetColorRemove(presetColorId);\n        }\n    };\n\n    return (\n        <StyledPresetColors>\n            {content}\n            {!shouldHideDefaultPresetColors && (\n                <PresetButton\n                    id={currentPresetColor?.id}\n                    isCustom={currentPresetColor?.isCustom}\n                    onAdd={handleAddColor}\n                    onRemove={handleRemoveColor}\n                />\n            )}\n        </StyledPresetColors>\n    );\n};\n\nPresetColors.displayName = 'PresetColors';\n\nexport default PresetColors;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PresetColors.js","names":["isHex","React","useContext","useEffect","useMemo","useState","putSiteColors","getSiteColors","PRESETCOLORS","extractRgbValues","hexToRgb","rgbToHex","ColorPickerContext","PresetButton","PresetColor","StyledPresetColors","usePresetColorKeyboardNavigation","PresetColors","presetColors","onPresetColorRemove","onPresetColorAdd","shouldUseSiteColors","shouldHideDefaultPresetColors","shouldEnableKeyboardHighlighting","selectedColor","siteColors","setSiteColors","undefined","focusedPresetIndex","setFocusedPresetIndex","loadSiteColors","presetColorId","colors","prevColors","newColors","value","map","color","r","g","b","a","newColor","id","Math","random","toString","isCustom","deletedColor","find","filteredColors","filter","formattedColors","rgbValues","combinedColors","tmp","content","items","forEach","index","push","createElement","key","isKeyboardFocusable","onFocus","presetIndex","handlePresetColorsKeyDown","onFocusChange","currentPresetColor","handleAddColor","presetColor","handleRemoveColor","onKeyDown","length","onAdd","onRemove","displayName"],"sources":["../../../../../src/components/color-picker-popup/preset-colors/PresetColors.tsx"],"sourcesContent":["import { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ReactElement } from 'react';\n\nimport { putSiteColors } from '../../../api/color/get';\nimport { getSiteColors } from '../../../api/color/put';\nimport { PRESETCOLORS } from '../../../constants/color';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport { extractRgbValues, hexToRgb, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport PresetButton from './preset-button/PresetButton';\nimport PresetColor from './preset-color/PresetColor';\nimport { StyledPresetColors } from './PresetColors.styles';\nimport { usePresetColorKeyboardNavigation } from '../../../hooks/usePresetColorKeyboardNavigation';\n\ninterface PresetColorsProps {\n    presetColors?: IPresetColor[];\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldUseSiteColors: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst PresetColors = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldUseSiteColors,\n    shouldHideDefaultPresetColors,\n    shouldEnableKeyboardHighlighting,\n}: PresetColorsProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const [siteColors, setSiteColors] = useState<IPresetColor[] | undefined>(undefined);\n    const [focusedPresetIndex, setFocusedPresetIndex] = useState(0);\n\n    const loadSiteColors = async (presetColorId?: IPresetColor['id']) => {\n        const colors = await getSiteColors();\n\n        setSiteColors((prevColors) => {\n            const newColors = colors.value.map((color) => {\n                const { r, g, b, a } = hexToRgb(color);\n\n                const newColor = `rgba(${r},${g},${b},${a})`;\n\n                return {\n                    color: newColor,\n                    id: Math.random().toString(),\n                    isCustom: true,\n                };\n            });\n\n            if (!presetColorId) {\n                return newColors;\n            }\n\n            const deletedColor = prevColors?.find(({ id }) => id === presetColorId)?.color;\n\n            if (!deletedColor) {\n                return newColors;\n            }\n\n            const filteredColors = newColors?.filter(({ color }) => color !== deletedColor);\n\n            const formattedColors = filteredColors?.map(({ color }) => {\n                const rgbValues = extractRgbValues(color);\n\n                return rgbToHex(rgbValues);\n            });\n\n            void putSiteColors(formattedColors ?? []);\n\n            return filteredColors;\n        });\n    };\n\n    useEffect(() => {\n        if (!shouldUseSiteColors) {\n            setSiteColors(undefined);\n\n            return;\n        }\n\n        void loadSiteColors();\n    }, [shouldUseSiteColors]);\n\n    const combinedColors = useMemo(() => {\n        const tmp = (presetColors ?? []).map(({ color, isCustom, id }) => {\n            let newColor = color;\n\n            if (isHex(color)) {\n                const { r, g, b, a } = hexToRgb(color);\n\n                newColor = `rgba(${r},${g},${b},${a})`;\n            }\n\n            return {\n                id,\n                isCustom,\n                color: newColor,\n            };\n        });\n\n        if (shouldHideDefaultPresetColors) {\n            return tmp;\n        }\n\n        return [...PRESETCOLORS, ...(siteColors ?? []), ...tmp];\n    }, [presetColors, shouldHideDefaultPresetColors, siteColors]);\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        combinedColors.forEach(({ color, id }, index) => {\n            items.push(\n                <PresetColor\n                    key={`preset-color__${id}`}\n                    color={color}\n                    isKeyboardFocusable={index === focusedPresetIndex}\n                    onFocus={() => setFocusedPresetIndex(index)}\n                    presetIndex={index}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                />,\n            );\n        });\n\n        return items;\n    }, [combinedColors, focusedPresetIndex, shouldEnableKeyboardHighlighting]);\n\n    const handlePresetColorsKeyDown = usePresetColorKeyboardNavigation({\n        onFocusChange: setFocusedPresetIndex,\n    });\n\n    const currentPresetColor = useMemo(\n        () => combinedColors.find(({ color }) => color === selectedColor),\n        [combinedColors, selectedColor],\n    );\n\n    const handleAddColor = (presetColor: IPresetColor) => {\n        if (typeof onPresetColorAdd === 'function') {\n            onPresetColorAdd(presetColor);\n        }\n\n        setSiteColors((prevColors) => {\n            const colors = [...(prevColors ?? []), presetColor];\n\n            const newColors = colors?.map(({ color }) => {\n                const rgbValues = extractRgbValues(color);\n\n                return rgbToHex(rgbValues);\n            });\n\n            void putSiteColors(newColors);\n\n            return colors;\n        });\n    };\n\n    const handleRemoveColor = (presetColorId: IPresetColor['id']) => {\n        void loadSiteColors(presetColorId);\n\n        if (typeof onPresetColorRemove === 'function') {\n            onPresetColorRemove(presetColorId);\n        }\n    };\n\n    return (\n        <StyledPresetColors onKeyDown={handlePresetColorsKeyDown}>\n            {content}\n            {!shouldHideDefaultPresetColors && (\n                <PresetButton\n                    id={currentPresetColor?.id}\n                    isCustom={currentPresetColor?.isCustom}\n                    isKeyboardFocusable={focusedPresetIndex === combinedColors.length}\n                    onAdd={handleAddColor}\n                    onFocus={() => setFocusedPresetIndex(combinedColors.length)}\n                    onRemove={handleRemoveColor}\n                    presetIndex={combinedColors.length}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                />\n            )}\n        </StyledPresetColors>\n    );\n};\n\nPresetColors.displayName = 'PresetColors';\n\nexport default PresetColors;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
-import { Icon } from '@chayns-components/core';
-import React, { useContext } from 'react';
+import { Icon, useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';
+import React, { useContext, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { ColorPickerContext } from '../../../ColorPickerProvider';
 import { StyledPresetButton } from './PresetButton.styles';
@@ -7,15 +7,27 @@ const PresetButton = ({
   id,
   isCustom,
   onRemove,
-  onAdd
+  onAdd,
+  shouldEnableKeyboardHighlighting,
+  isKeyboardFocusable = false,
+  onFocus,
+  presetIndex
 }) => {
   const {
     selectedColor
   } = useContext(ColorPickerContext);
-  const icon = isCustom ? ['fa-solid fa-trash'] : ['fa-solid fa-plus'];
+  const buttonRef = useRef(null);
+  const canRemove = Boolean(id && isCustom);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(buttonRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle',
+    padding: 3
+  });
+  const icon = canRemove ? ['fa-solid fa-trash'] : ['fa-solid fa-plus'];
   const handleClick = () => {
-    if (id) {
-      if (typeof onRemove === 'function') {
+    if (canRemove) {
+      if (id && typeof onRemove === 'function') {
         onRemove(id);
       }
     } else if (typeof onAdd === 'function' && selectedColor) {
@@ -28,10 +40,15 @@ const PresetButton = ({
   };
   return /*#__PURE__*/React.createElement(StyledPresetButton, {
     onClick: handleClick,
-    $isDisabled: !!id && !isCustom
+    onFocus: onFocus,
+    ref: buttonRef,
+    "data-preset-color-index": presetIndex,
+    tabIndex: isKeyboardFocusable ? 0 : -1,
+    type: "button",
+    $isDisabled: false
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: icon,
-    size: isCustom ? 10 : 15
+    size: canRemove ? 10 : 15
   }));
 };
 PresetButton.displayName = 'PresetButton';

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

@@ -1 +1 @@
-{"version":3,"file":"PresetButton.js","names":["Icon","React","useContext","v4","uuidv4","ColorPickerContext","StyledPresetButton","PresetButton","id","isCustom","onRemove","onAdd","selectedColor","icon","handleClick","color","createElement","onClick","$isDisabled","icons","size","displayName"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-button/PresetButton.tsx"],"sourcesContent":["import { Icon } from '@chayns-components/core';\nimport React, { useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { IPresetColor } from '../../../../types/colorPicker';\nimport { ColorPickerContext } from '../../../ColorPickerProvider';\nimport { StyledPresetButton } from './PresetButton.styles';\n\ninterface PresetButtonProps {\n    id?: IPresetColor['id'];\n    isCustom?: IPresetColor['isCustom'];\n    onAdd?: (color: IPresetColor) => void;\n    onRemove?: (id: IPresetColor['id']) => void;\n}\n\nconst PresetButton = ({ id, isCustom, onRemove, onAdd }: PresetButtonProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const icon = isCustom ? ['fa-solid fa-trash'] : ['fa-solid fa-plus'];\n\n    const handleClick = () => {\n        if (id) {\n            if (typeof onRemove === 'function') {\n                onRemove(id);\n            }\n        } else if (typeof onAdd === 'function' && selectedColor) {\n            onAdd({ color: selectedColor, isCustom: true, id: uuidv4() });\n        }\n    };\n\n    return (\n        <StyledPresetButton onClick={handleClick} $isDisabled={!!id && !isCustom}>\n            <Icon icons={icon} size={isCustom ? 10 : 15} />\n        </StyledPresetButton>\n    );\n};\n\nPresetButton.displayName = 'PresetButton';\n\nexport default PresetButton;\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,yBAAyB;AAC9C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,kBAAkB,QAAQ,uBAAuB;AAS1D,MAAMC,YAAY,GAAGA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC;AAAyB,CAAC,KAAK;EAC3E,MAAM;IAAEC;EAAc,CAAC,GAAGV,UAAU,CAACG,kBAAkB,CAAC;EAExD,MAAMQ,IAAI,GAAGJ,QAAQ,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,CAAC;EAEpE,MAAMK,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAIN,EAAE,EAAE;MACJ,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACF,EAAE,CAAC;MAChB;IACJ,CAAC,MAAM,IAAI,OAAOG,KAAK,KAAK,UAAU,IAAIC,aAAa,EAAE;MACrDD,KAAK,CAAC;QAAEI,KAAK,EAAEH,aAAa;QAAEH,QAAQ,EAAE,IAAI;QAAED,EAAE,EAAEJ,MAAM,CAAC;MAAE,CAAC,CAAC;IACjE;EACJ,CAAC;EAED,oBACIH,KAAA,CAAAe,aAAA,CAACV,kBAAkB;IAACW,OAAO,EAAEH,WAAY;IAACI,WAAW,EAAE,CAAC,CAACV,EAAE,IAAI,CAACC;EAAS,gBACrER,KAAA,CAAAe,aAAA,CAAChB,IAAI;IAACmB,KAAK,EAAEN,IAAK;IAACO,IAAI,EAAEX,QAAQ,GAAG,EAAE,GAAG;EAAG,CAAE,CAC9B,CAAC;AAE7B,CAAC;AAEDF,YAAY,CAACc,WAAW,GAAG,cAAc;AAEzC,eAAed,YAAY","ignoreList":[]}
+{"version":3,"file":"PresetButton.js","names":["Icon","useFocusRingPortal","useKeyboardFocusHighlighting","React","useContext","useRef","v4","uuidv4","ColorPickerContext","StyledPresetButton","PresetButton","id","isCustom","onRemove","onAdd","shouldEnableKeyboardHighlighting","isKeyboardFocusable","onFocus","presetIndex","selectedColor","buttonRef","canRemove","Boolean","shouldShowKeyboardHighlighting","isEnabled","shape","padding","icon","handleClick","color","createElement","onClick","ref","tabIndex","type","$isDisabled","icons","size","displayName"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-button/PresetButton.tsx"],"sourcesContent":["import { Icon, useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';\nimport React, { FocusEventHandler, useContext, useRef } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { IPresetColor } from '../../../../types/colorPicker';\nimport { ColorPickerContext } from '../../../ColorPickerProvider';\nimport { StyledPresetButton } from './PresetButton.styles';\n\ninterface PresetButtonProps {\n    id?: IPresetColor['id'];\n    isCustom?: IPresetColor['isCustom'];\n    onAdd?: (color: IPresetColor) => void;\n    onRemove?: (id: IPresetColor['id']) => void;\n    shouldEnableKeyboardHighlighting?: boolean;\n    isKeyboardFocusable?: boolean;\n    onFocus?: FocusEventHandler<HTMLButtonElement>;\n    presetIndex?: number;\n}\n\nconst PresetButton = ({\n    id,\n    isCustom,\n    onRemove,\n    onAdd,\n    shouldEnableKeyboardHighlighting,\n    isKeyboardFocusable = false,\n    onFocus,\n    presetIndex,\n}: PresetButtonProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const canRemove = Boolean(id && isCustom);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(buttonRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: 'circle',\n        padding: 3,\n    });\n\n    const icon = canRemove ? ['fa-solid fa-trash'] : ['fa-solid fa-plus'];\n\n    const handleClick = () => {\n        if (canRemove) {\n            if (id && typeof onRemove === 'function') {\n                onRemove(id);\n            }\n        } else if (typeof onAdd === 'function' && selectedColor) {\n            onAdd({ color: selectedColor, isCustom: true, id: uuidv4() });\n        }\n    };\n\n    return (\n        <StyledPresetButton\n            onClick={handleClick}\n            onFocus={onFocus}\n            ref={buttonRef}\n            data-preset-color-index={presetIndex}\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n            type=\"button\"\n            $isDisabled={false}\n        >\n            <Icon icons={icon} size={canRemove ? 10 : 15} />\n        </StyledPresetButton>\n    );\n};\n\nPresetButton.displayName = 'PresetButton';\n\nexport default PresetButton;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,kBAAkB,EAAEC,4BAA4B,QAAQ,yBAAyB;AAChG,OAAOC,KAAK,IAAuBC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AACpE,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,YAAY,GAAGA,CAAC;EAClBC,EAAE;EACFC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,gCAAgC;EAChCC,mBAAmB,GAAG,KAAK;EAC3BC,OAAO;EACPC;AACe,CAAC,KAAK;EACrB,MAAM;IAAEC;EAAc,CAAC,GAAGf,UAAU,CAACI,kBAAkB,CAAC;EACxD,MAAMY,SAAS,GAAGf,MAAM,CAAoB,IAAI,CAAC;EACjD,MAAMgB,SAAS,GAAGC,OAAO,CAACX,EAAE,IAAIC,QAAQ,CAAC;EACzC,MAAMW,8BAA8B,GAAGrB,4BAA4B,CAC/Da,gCACJ,CAAC;EAEDd,kBAAkB,CAACmB,SAAS,EAAE;IAC1BI,SAAS,EAAED,8BAA8B;IACzCE,KAAK,EAAE,QAAQ;IACfC,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,MAAMC,IAAI,GAAGN,SAAS,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,CAAC;EAErE,MAAMO,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAIP,SAAS,EAAE;MACX,IAAIV,EAAE,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QACtCA,QAAQ,CAACF,EAAE,CAAC;MAChB;IACJ,CAAC,MAAM,IAAI,OAAOG,KAAK,KAAK,UAAU,IAAIK,aAAa,EAAE;MACrDL,KAAK,CAAC;QAAEe,KAAK,EAAEV,aAAa;QAAEP,QAAQ,EAAE,IAAI;QAAED,EAAE,EAAEJ,MAAM,CAAC;MAAE,CAAC,CAAC;IACjE;EACJ,CAAC;EAED,oBACIJ,KAAA,CAAA2B,aAAA,CAACrB,kBAAkB;IACfsB,OAAO,EAAEH,WAAY;IACrBX,OAAO,EAAEA,OAAQ;IACjBe,GAAG,EAAEZ,SAAU;IACf,2BAAyBF,WAAY;IACrCe,QAAQ,EAAEjB,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE;IACvCkB,IAAI,EAAC,QAAQ;IACbC,WAAW,EAAE;EAAM,gBAEnBhC,KAAA,CAAA2B,aAAA,CAAC9B,IAAI;IAACoC,KAAK,EAAET,IAAK;IAACU,IAAI,EAAEhB,SAAS,GAAG,EAAE,GAAG;EAAG,CAAE,CAC/B,CAAC;AAE7B,CAAC;AAEDX,YAAY,CAAC4B,WAAW,GAAG,cAAc;AAEzC,eAAe5B,YAAY","ignoreList":[]}

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

@@ -1,10 +1,11 @@
 import styled from 'styled-components';
-export const StyledPresetButton = styled.div`
+export const StyledPresetButton = styled.button`
     display: flex;
     align-items: center;
     justify-content: center;
 
     background-color: transparent;
+    padding: 0;
     width: 22px;
     aspect-ratio: 1;
     cursor: ${({

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

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

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

@@ -1,8 +1,13 @@
-import React, { useContext, useMemo } from 'react';
+import { useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';
+import React, { useContext, useMemo, useRef } from 'react';
 import { ColorPickerContext } from '../../../ColorPickerProvider';
 import { StyledPresetColor, StyledPresetColorBackground, StyledPresetColorColor } from './PresetColor.styles';
 const PresetColor = ({
-  color
+  color,
+  shouldEnableKeyboardHighlighting,
+  isKeyboardFocusable = false,
+  presetIndex,
+  onFocus
 }) => {
   const {
     selectedColor,
@@ -13,6 +18,13 @@ const PresetColor = ({
     updateIsPresetColor
   } = useContext(ColorPickerContext);
   const isSelected = useMemo(() => selectedColor === color, [color, selectedColor]);
+  const presetColorRef = useRef(null);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(presetColorRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle',
+    padding: 3
+  });
   const handleClick = () => {
     if (typeof updateSelectedColor === 'function') {
       updateSelectedColor(color);
@@ -30,9 +42,21 @@ const PresetColor = ({
       updateShouldGetCoordinates(true);
     }
   };
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  };
   return /*#__PURE__*/React.createElement(StyledPresetColor, {
+    ref: presetColorRef,
     onClick: handleClick,
-    $isSelected: isSelected
+    onKeyDown: handleKeyDown,
+    onFocus: onFocus,
+    $isSelected: isSelected,
+    "data-preset-color-index": presetIndex,
+    role: "button",
+    tabIndex: isKeyboardFocusable ? 0 : -1
   }, /*#__PURE__*/React.createElement(StyledPresetColorBackground, null), /*#__PURE__*/React.createElement(StyledPresetColorColor, {
     $color: color
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColor.js","names":["React","useContext","useMemo","ColorPickerContext","StyledPresetColor","StyledPresetColorBackground","StyledPresetColorColor","PresetColor","color","selectedColor","updateSelectedColor","updateHueColor","updateShouldCallOnSelect","updateShouldGetCoordinates","updateIsPresetColor","isSelected","handleClick","createElement","onClick","$isSelected","$color","displayName"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-color/PresetColor.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\n\nimport type { IPresetColor } from '../../../../types/colorPicker';\nimport { ColorPickerContext } from '../../../ColorPickerProvider';\nimport {\n    StyledPresetColor,\n    StyledPresetColorBackground,\n    StyledPresetColorColor,\n} from './PresetColor.styles';\n\ninterface PresetColorProps {\n    color: IPresetColor['color'];\n}\n\nconst PresetColor = ({ color }: PresetColorProps) => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateHueColor,\n        updateShouldCallOnSelect,\n        updateShouldGetCoordinates,\n        updateIsPresetColor,\n    } = useContext(ColorPickerContext);\n\n    const isSelected = useMemo(() => selectedColor === color, [color, selectedColor]);\n\n    const handleClick = () => {\n        if (typeof updateSelectedColor === 'function') {\n            updateSelectedColor(color);\n        }\n\n        if (typeof updateHueColor === 'function') {\n            updateHueColor(color);\n        }\n\n        if (typeof updateIsPresetColor === 'function') {\n            updateIsPresetColor(true);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function') {\n            updateShouldCallOnSelect(true);\n        }\n\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(true);\n        }\n    };\n\n    return (\n        <StyledPresetColor onClick={handleClick} $isSelected={isSelected}>\n            <StyledPresetColorBackground />\n            <StyledPresetColorColor $color={color} />\n        </StyledPresetColor>\n    );\n};\n\nPresetColor.displayName = 'PresetColor';\n\nexport default PresetColor;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAGlD,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SACIC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,QACnB,sBAAsB;AAM7B,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAwB,CAAC,KAAK;EACjD,MAAM;IACFC,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,wBAAwB;IACxBC,0BAA0B;IAC1BC;EACJ,CAAC,GAAGb,UAAU,CAACE,kBAAkB,CAAC;EAElC,MAAMY,UAAU,GAAGb,OAAO,CAAC,MAAMO,aAAa,KAAKD,KAAK,EAAE,CAACA,KAAK,EAAEC,aAAa,CAAC,CAAC;EAEjF,MAAMO,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAON,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAACF,KAAK,CAAC;IAC9B;IAEA,IAAI,OAAOG,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACH,KAAK,CAAC;IACzB;IAEA,IAAI,OAAOM,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAAC,IAAI,CAAC;IAC7B;IAEA,IAAI,OAAOF,wBAAwB,KAAK,UAAU,EAAE;MAChDA,wBAAwB,CAAC,IAAI,CAAC;IAClC;IAEA,IAAI,OAAOC,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAAC,IAAI,CAAC;IACpC;EACJ,CAAC;EAED,oBACIb,KAAA,CAAAiB,aAAA,CAACb,iBAAiB;IAACc,OAAO,EAAEF,WAAY;IAACG,WAAW,EAAEJ;EAAW,gBAC7Df,KAAA,CAAAiB,aAAA,CAACZ,2BAA2B,MAAE,CAAC,eAC/BL,KAAA,CAAAiB,aAAA,CAACX,sBAAsB;IAACc,MAAM,EAAEZ;EAAM,CAAE,CACzB,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACc,WAAW,GAAG,aAAa;AAEvC,eAAed,WAAW","ignoreList":[]}
+{"version":3,"file":"PresetColor.js","names":["useFocusRingPortal","useKeyboardFocusHighlighting","React","useContext","useMemo","useRef","ColorPickerContext","StyledPresetColor","StyledPresetColorBackground","StyledPresetColorColor","PresetColor","color","shouldEnableKeyboardHighlighting","isKeyboardFocusable","presetIndex","onFocus","selectedColor","updateSelectedColor","updateHueColor","updateShouldCallOnSelect","updateShouldGetCoordinates","updateIsPresetColor","isSelected","presetColorRef","shouldShowKeyboardHighlighting","isEnabled","shape","padding","handleClick","handleKeyDown","event","key","preventDefault","createElement","ref","onClick","onKeyDown","$isSelected","role","tabIndex","$color","displayName"],"sources":["../../../../../../src/components/color-picker-popup/preset-colors/preset-color/PresetColor.tsx"],"sourcesContent":["import { useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';\nimport React, { FocusEventHandler, KeyboardEvent, useContext, useMemo, useRef } from 'react';\n\nimport type { IPresetColor } from '../../../../types/colorPicker';\nimport { ColorPickerContext } from '../../../ColorPickerProvider';\nimport {\n    StyledPresetColor,\n    StyledPresetColorBackground,\n    StyledPresetColorColor,\n} from './PresetColor.styles';\n\ninterface PresetColorProps {\n    color: IPresetColor['color'];\n    shouldEnableKeyboardHighlighting?: boolean;\n    isKeyboardFocusable?: boolean;\n    presetIndex?: number;\n    onFocus?: FocusEventHandler<HTMLDivElement>;\n}\n\nconst PresetColor = ({\n    color,\n    shouldEnableKeyboardHighlighting,\n    isKeyboardFocusable = false,\n    presetIndex,\n    onFocus,\n}: PresetColorProps) => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateHueColor,\n        updateShouldCallOnSelect,\n        updateShouldGetCoordinates,\n        updateIsPresetColor,\n    } = useContext(ColorPickerContext);\n\n    const isSelected = useMemo(() => selectedColor === color, [color, selectedColor]);\n    const presetColorRef = useRef<HTMLDivElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(presetColorRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: 'circle',\n        padding: 3,\n    });\n\n    const handleClick = () => {\n        if (typeof updateSelectedColor === 'function') {\n            updateSelectedColor(color);\n        }\n\n        if (typeof updateHueColor === 'function') {\n            updateHueColor(color);\n        }\n\n        if (typeof updateIsPresetColor === 'function') {\n            updateIsPresetColor(true);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function') {\n            updateShouldCallOnSelect(true);\n        }\n\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(true);\n        }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleClick();\n        }\n    };\n\n    return (\n        <StyledPresetColor\n            ref={presetColorRef}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onFocus={onFocus}\n            $isSelected={isSelected}\n            data-preset-color-index={presetIndex}\n            role=\"button\"\n            tabIndex={isKeyboardFocusable ? 0 : -1}\n        >\n            <StyledPresetColorBackground />\n            <StyledPresetColorColor $color={color} />\n        </StyledPresetColor>\n    );\n};\n\nPresetColor.displayName = 'PresetColor';\n\nexport default PresetColor;\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,4BAA4B,QAAQ,yBAAyB;AAC1F,OAAOC,KAAK,IAAsCC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAG5F,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SACIC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,QACnB,sBAAsB;AAU7B,MAAMC,WAAW,GAAGA,CAAC;EACjBC,KAAK;EACLC,gCAAgC;EAChCC,mBAAmB,GAAG,KAAK;EAC3BC,WAAW;EACXC;AACc,CAAC,KAAK;EACpB,MAAM;IACFC,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,wBAAwB;IACxBC,0BAA0B;IAC1BC;EACJ,CAAC,GAAGlB,UAAU,CAACG,kBAAkB,CAAC;EAElC,MAAMgB,UAAU,GAAGlB,OAAO,CAAC,MAAMY,aAAa,KAAKL,KAAK,EAAE,CAACA,KAAK,EAAEK,aAAa,CAAC,CAAC;EACjF,MAAMO,cAAc,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMmB,8BAA8B,GAAGvB,4BAA4B,CAC/DW,gCACJ,CAAC;EAEDZ,kBAAkB,CAACuB,cAAc,EAAE;IAC/BE,SAAS,EAAED,8BAA8B;IACzCE,KAAK,EAAE,QAAQ;IACfC,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAOX,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAACN,KAAK,CAAC;IAC9B;IAEA,IAAI,OAAOO,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACP,KAAK,CAAC;IACzB;IAEA,IAAI,OAAOU,mBAAmB,KAAK,UAAU,EAAE;MAC3CA,mBAAmB,CAAC,IAAI,CAAC;IAC7B;IAEA,IAAI,OAAOF,wBAAwB,KAAK,UAAU,EAAE;MAChDA,wBAAwB,CAAC,IAAI,CAAC;IAClC;IAEA,IAAI,OAAOC,0BAA0B,KAAK,UAAU,EAAE;MAClDA,0BAA0B,CAAC,IAAI,CAAC;IACpC;EACJ,CAAC;EAED,MAAMS,aAAa,GAAIC,KAAoC,IAAK;IAC5D,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBJ,WAAW,CAAC,CAAC;IACjB;EACJ,CAAC;EAED,oBACI1B,KAAA,CAAA+B,aAAA,CAAC1B,iBAAiB;IACd2B,GAAG,EAAEX,cAAe;IACpBY,OAAO,EAAEP,WAAY;IACrBQ,SAAS,EAAEP,aAAc;IACzBd,OAAO,EAAEA,OAAQ;IACjBsB,WAAW,EAAEf,UAAW;IACxB,2BAAyBR,WAAY;IACrCwB,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE1B,mBAAmB,GAAG,CAAC,GAAG,CAAC;EAAE,gBAEvCX,KAAA,CAAA+B,aAAA,CAACzB,2BAA2B,MAAE,CAAC,eAC/BN,KAAA,CAAA+B,aAAA,CAACxB,sBAAsB;IAAC+B,MAAM,EAAE7B;EAAM,CAAE,CACzB,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAAC+B,WAAW,GAAG,aAAa;AAEvC,eAAe/B,WAAW","ignoreList":[]}

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

@@ -6,7 +6,8 @@ import TransparencySlider from '../../transparency-slider/TransparencySlider';
 import ColorPreview from './color-preview/ColorPreview';
 import { StyledSliders, StyledSlidersWrapper } from './Sliders.styles';
 const Sliders = ({
-  shouldShowTransparencySlider
+  shouldShowTransparencySlider,
+  shouldEnableKeyboardHighlighting
 }) => {
   const {
     selectedColor,
@@ -26,6 +27,9 @@ const Sliders = ({
     if (typeof updateHueColor === 'function' && color) {
       updateHueColor(color);
     }
+    if (typeof updateSelectedColor === 'function' && color) {
+      updateSelectedColor(color);
+    }
   };
   const handleStart = () => {
     if (typeof updateShouldGetCoordinates === 'function') {
@@ -53,12 +57,14 @@ const Sliders = ({
     opacity: opacity,
     onEnd: handleEnd,
     onStart: handleHueStart,
-    onChange: handleHueColorChange
+    onChange: handleHueColorChange,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }), shouldShowTransparencySlider && /*#__PURE__*/React.createElement(TransparencySlider, {
     color: selectedColor,
     onEnd: handleEnd,
     onStart: handleStart,
-    onChange: handleColorChange
+    onChange: handleColorChange,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   })), /*#__PURE__*/React.createElement(ColorPreview, null));
 };
 Sliders.displayName = 'Sliders';

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

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

package/lib/esm/components/hue-slider/HueSlider.js

@@ -1,4 +1,5 @@
 import { hslToRgb255 } from '@chayns/colors';
+import { useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';
 import { setRefreshScrollEnabled } from 'chayns-api';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';
@@ -8,13 +9,21 @@ const HueSlider = ({
   onStart,
   onEnd,
   opacity,
-  color = 'rgba(255, 0, 0, 1)'
+  color = 'rgba(255, 0, 0, 1)',
+  shouldEnableKeyboardHighlighting
 }) => {
   const [editedValue, setEditedValue] = useState(0);
   const [hslColor, setHslColor] = useState('hsl(0, 0, 100)');
   const [internalOpacity, setInternalOpacity] = useState(1);
   const sliderThumbRef = useRef(null);
   const sliderRef = useRef(null);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(sliderRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: sliderThumbRef,
+    shape: 'circle',
+    padding: 3
+  });
   useEffect(() => {
     if (color) {
       let rgb;