@chayns-components/color-picker 5.5.30 → 5.5.34

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

@@ -1 +1 @@
-{"version":3,"file":"MoreOptions.js","names":["_core","require","_colors","_react","_interopRequireWildcard","_color","_ColorPickerProvider","_MoreOptions","_textstring","_textStrings","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MoreOptions","selectedColor","updateSelectedColor","updateShouldCallOnSelect","useContext","ColorPickerContext","areaProvider","AreaContext","tmpHexValue","setTmpHexValue","useState","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","shouldChangeColor","useMemo","handleHexChange","event","target","value","isValid","isHex","g","b","a","hexToRgb","handleRgbChange","isValidRGBA","useEffect","rgbToHex","extractRgbValues","title","useTextstringValue","textstring","ttsToITextString","textStrings","components","colorPickerPopup","moreOptions","accordionTitle","createElement","StyledMoreOptions","AccordionGroup","isWrapped","Accordion","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","$shouldChangeColor","onChange","$isInvalid","displayName","_default","exports"],"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":["_core","require","_colors","_react","_interopRequireWildcard","_color","_ColorPickerProvider","_MoreOptions","_textstring","_textStrings","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MoreOptions","shouldEnableKeyboardHighlighting","selectedColor","updateSelectedColor","updateShouldCallOnSelect","useContext","ColorPickerContext","areaProvider","AreaContext","tmpHexValue","setTmpHexValue","useState","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","areInputsMounted","setAreInputsMounted","hexInputRef","useRef","rgbInputRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","updateKey","setHexInputRef","useCallback","element","current","setRgbInputRef","shouldChangeColor","useMemo","handleHexChange","event","target","value","isValid","isHex","g","b","a","hexToRgb","handleRgbChange","isValidRGBA","useEffect","rgbToHex","extractRgbValues","title","useTextstringValue","textstring","ttsToITextString","textStrings","components","colorPickerPopup","moreOptions","accordionTitle","createElement","StyledMoreOptions","AccordionGroup","isWrapped","Accordion","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","ref","$shouldChangeColor","onChange","$isInvalid","displayName","_default","exports"],"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/cjs/components/color-picker-popup/more-options/MoreOptions.styles.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"MoreOptions.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledMoreOptions","exports","styled","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AACtC,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAGF,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,sBAAsB,GAAAJ,OAAA,CAAAI,sBAAA,GAAGH,yBAAM,CAACI,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":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledMoreOptions","exports","styled","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AACtC,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAGF,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,sBAAsB,GAAAJ,OAAA,CAAAI,sBAAA,GAAGH,yBAAM,CAACI,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/cjs/components/color-picker-popup/preset-colors/PresetColors.js

@@ -14,6 +14,7 @@ var _ColorPickerProvider = require("../../ColorPickerProvider");
 var _PresetButton = _interopRequireDefault(require("./preset-button/PresetButton"));
 var _PresetColor = _interopRequireDefault(require("./preset-color/PresetColor"));
 var _PresetColors = require("./PresetColors.styles");
+var _usePresetColorKeyboardNavigation = require("../../../hooks/usePresetColorKeyboardNavigation");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const PresetColors = ({
@@ -21,12 +22,14 @@ const PresetColors = ({
   onPresetColorRemove,
   onPresetColorAdd,
   shouldUseSiteColors,
-  shouldHideDefaultPresetColors
+  shouldHideDefaultPresetColors,
+  shouldEnableKeyboardHighlighting
 }) => {
   const {
     selectedColor
   } = (0, _react.useContext)(_ColorPickerProvider.ColorPickerContext);
   const [siteColors, setSiteColors] = (0, _react.useState)(undefined);
+  const [focusedPresetIndex, setFocusedPresetIndex] = (0, _react.useState)(0);
   const loadSiteColors = async presetColorId => {
     const colors = await (0, _put.getSiteColors)();
     setSiteColors(prevColors => {
@@ -106,14 +109,21 @@ const PresetColors = ({
     combinedColors.forEach(({
       color,
       id
-    }) => {
+    }, index) => {
       items.push(/*#__PURE__*/_react.default.createElement(_PresetColor.default, {
         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 = (0, _usePresetColorKeyboardNavigation.usePresetColorKeyboardNavigation)({
+    onFocusChange: setFocusedPresetIndex
+  });
   const currentPresetColor = (0, _react.useMemo)(() => combinedColors.find(({
     color
   }) => color === selectedColor), [combinedColors, selectedColor]);
@@ -139,11 +149,17 @@ const PresetColors = ({
       onPresetColorRemove(presetColorId);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_PresetColors.StyledPresetColors, null, content, !shouldHideDefaultPresetColors && /*#__PURE__*/_react.default.createElement(_PresetButton.default, {
+  return /*#__PURE__*/_react.default.createElement(_PresetColors.StyledPresetColors, {
+    onKeyDown: handlePresetColorsKeyDown
+  }, content, !shouldHideDefaultPresetColors && /*#__PURE__*/_react.default.createElement(_PresetButton.default, {
     id: currentPresetColor === null || currentPresetColor === void 0 ? void 0 : currentPresetColor.id,
     isCustom: currentPresetColor === null || currentPresetColor === void 0 ? void 0 : 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/cjs/components/color-picker-popup/preset-colors/PresetColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.js","names":["_colors","require","_react","_interopRequireWildcard","_get","_put","_color","_color2","_ColorPickerProvider","_PresetButton","_interopRequireDefault","_PresetColor","_PresetColors","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PresetColors","presetColors","onPresetColorRemove","onPresetColorAdd","shouldUseSiteColors","shouldHideDefaultPresetColors","selectedColor","useContext","ColorPickerContext","siteColors","setSiteColors","useState","undefined","loadSiteColors","presetColorId","colors","getSiteColors","prevColors","_prevColors$find","newColors","value","map","color","g","b","a","hexToRgb","newColor","id","Math","random","toString","isCustom","deletedColor","find","filteredColors","filter","formattedColors","rgbValues","extractRgbValues","rgbToHex","putSiteColors","useEffect","combinedColors","useMemo","tmp","isHex","PRESETCOLORS","content","items","forEach","push","createElement","key","currentPresetColor","handleAddColor","presetColor","handleRemoveColor","StyledPresetColors","onAdd","onRemove","displayName","_default","exports"],"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":["_colors","require","_react","_interopRequireWildcard","_get","_put","_color","_color2","_ColorPickerProvider","_PresetButton","_interopRequireDefault","_PresetColor","_PresetColors","_usePresetColorKeyboardNavigation","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PresetColors","presetColors","onPresetColorRemove","onPresetColorAdd","shouldUseSiteColors","shouldHideDefaultPresetColors","shouldEnableKeyboardHighlighting","selectedColor","useContext","ColorPickerContext","siteColors","setSiteColors","useState","undefined","focusedPresetIndex","setFocusedPresetIndex","loadSiteColors","presetColorId","colors","getSiteColors","prevColors","_prevColors$find","newColors","value","map","color","g","b","a","hexToRgb","newColor","id","Math","random","toString","isCustom","deletedColor","find","filteredColors","filter","formattedColors","rgbValues","extractRgbValues","rgbToHex","putSiteColors","useEffect","combinedColors","useMemo","tmp","isHex","PRESETCOLORS","content","items","forEach","index","push","createElement","key","isKeyboardFocusable","onFocus","presetIndex","handlePresetColorsKeyDown","usePresetColorKeyboardNavigation","onFocusChange","currentPresetColor","handleAddColor","presetColor","handleRemoveColor","StyledPresetColors","onKeyDown","length","onAdd","onRemove","displayName","_default","exports"],"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/cjs/components/color-picker-popup/preset-colors/preset-button/PresetButton.js

@@ -14,15 +14,27 @@ const PresetButton = ({
   id,
   isCustom,
   onRemove,
-  onAdd
+  onAdd,
+  shouldEnableKeyboardHighlighting,
+  isKeyboardFocusable = false,
+  onFocus,
+  presetIndex
 }) => {
   const {
     selectedColor
   } = (0, _react.useContext)(_ColorPickerProvider.ColorPickerContext);
-  const icon = isCustom ? ['fa-solid fa-trash'] : ['fa-solid fa-plus'];
+  const buttonRef = (0, _react.useRef)(null);
+  const canRemove = Boolean(id && isCustom);
+  const shouldShowKeyboardHighlighting = (0, _core.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  (0, _core.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) {
@@ -35,10 +47,15 @@ const PresetButton = ({
   };
   return /*#__PURE__*/_react.default.createElement(_PresetButton.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.default.createElement(_core.Icon, {
     icons: icon,
-    size: isCustom ? 10 : 15
+    size: canRemove ? 10 : 15
   }));
 };
 PresetButton.displayName = 'PresetButton';

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

@@ -1 +1 @@
-{"version":3,"file":"PresetButton.js","names":["_core","require","_react","_interopRequireWildcard","_uuid","_ColorPickerProvider","_PresetButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PresetButton","id","isCustom","onRemove","onAdd","selectedColor","useContext","ColorPickerContext","icon","handleClick","color","uuidv4","createElement","StyledPresetButton","onClick","$isDisabled","Icon","icons","size","displayName","_default","exports"],"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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAA2D,SAAAE,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,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;AAS3D,MAAMkB,YAAY,GAAGA,CAAC;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC;AAAyB,CAAC,KAAK;EAC3E,MAAM;IAAEC;EAAc,CAAC,GAAG,IAAAC,iBAAU,EAACC,uCAAkB,CAAC;EAExD,MAAMC,IAAI,GAAGN,QAAQ,GAAG,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,CAAC;EAEpE,MAAMO,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAIR,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;QAAEM,KAAK,EAAEL,aAAa;QAAEH,QAAQ,EAAE,IAAI;QAAED,EAAE,EAAE,IAAAU,QAAM,EAAC;MAAE,CAAC,CAAC;IACjE;EACJ,CAAC;EAED,oBACInC,MAAA,CAAAe,OAAA,CAAAqB,aAAA,CAAChC,aAAA,CAAAiC,kBAAkB;IAACC,OAAO,EAAEL,WAAY;IAACM,WAAW,EAAE,CAAC,CAACd,EAAE,IAAI,CAACC;EAAS,gBACrE1B,MAAA,CAAAe,OAAA,CAAAqB,aAAA,CAACtC,KAAA,CAAA0C,IAAI;IAACC,KAAK,EAAET,IAAK;IAACU,IAAI,EAAEhB,QAAQ,GAAG,EAAE,GAAG;EAAG,CAAE,CAC9B,CAAC;AAE7B,CAAC;AAEDF,YAAY,CAACmB,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9B,OAAA,GAE3BS,YAAY","ignoreList":[]}
+{"version":3,"file":"PresetButton.js","names":["_core","require","_react","_interopRequireWildcard","_uuid","_ColorPickerProvider","_PresetButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PresetButton","id","isCustom","onRemove","onAdd","shouldEnableKeyboardHighlighting","isKeyboardFocusable","onFocus","presetIndex","selectedColor","useContext","ColorPickerContext","buttonRef","useRef","canRemove","Boolean","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","padding","icon","handleClick","color","uuidv4","createElement","StyledPresetButton","onClick","ref","tabIndex","type","$isDisabled","Icon","icons","size","displayName","_default","exports"],"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":"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","ignoreList":[]}

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

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledPresetButton = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledPresetButton = exports.StyledPresetButton = _styledComponents.default.div`
+const StyledPresetButton = exports.StyledPresetButton = _styledComponents.default.button`
     display: flex;
     align-items: center;
     justify-content: center;
 
     background-color: transparent;
+    padding: 0;
     width: 22px;
     aspect-ratio: 1;
     cursor: ${({

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

@@ -1 +1 @@
-{"version":3,"file":"PresetButton.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPresetButton","exports","styled","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,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":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPresetButton","exports","styled","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,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/cjs/components/color-picker-popup/preset-colors/preset-color/PresetColor.js

@@ -4,12 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _core = require("@chayns-components/core");
 var _react = _interopRequireWildcard(require("react"));
 var _ColorPickerProvider = require("../../../ColorPickerProvider");
 var _PresetColor = require("./PresetColor.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const PresetColor = ({
-  color
+  color,
+  shouldEnableKeyboardHighlighting,
+  isKeyboardFocusable = false,
+  presetIndex,
+  onFocus
 }) => {
   const {
     selectedColor,
@@ -20,6 +25,13 @@ const PresetColor = ({
     updateIsPresetColor
   } = (0, _react.useContext)(_ColorPickerProvider.ColorPickerContext);
   const isSelected = (0, _react.useMemo)(() => selectedColor === color, [color, selectedColor]);
+  const presetColorRef = (0, _react.useRef)(null);
+  const shouldShowKeyboardHighlighting = (0, _core.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  (0, _core.useFocusRingPortal)(presetColorRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle',
+    padding: 3
+  });
   const handleClick = () => {
     if (typeof updateSelectedColor === 'function') {
       updateSelectedColor(color);
@@ -37,9 +49,21 @@ const PresetColor = ({
       updateShouldGetCoordinates(true);
     }
   };
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_PresetColor.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.default.createElement(_PresetColor.StyledPresetColorBackground, null), /*#__PURE__*/_react.default.createElement(_PresetColor.StyledPresetColorColor, {
     $color: color
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"PresetColor.js","names":["_react","_interopRequireWildcard","require","_ColorPickerProvider","_PresetColor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PresetColor","color","selectedColor","updateSelectedColor","updateHueColor","updateShouldCallOnSelect","updateShouldGetCoordinates","updateIsPresetColor","useContext","ColorPickerContext","isSelected","useMemo","handleClick","createElement","StyledPresetColor","onClick","$isSelected","StyledPresetColorBackground","StyledPresetColorColor","$color","displayName","_default","exports"],"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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,oBAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAI8B,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,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;AAM9B,MAAMkB,WAAW,GAAGA,CAAC;EAAEC;AAAwB,CAAC,KAAK;EACjD,MAAM;IACFC,aAAa;IACbC,mBAAmB;IACnBC,cAAc;IACdC,wBAAwB;IACxBC,0BAA0B;IAC1BC;EACJ,CAAC,GAAG,IAAAC,iBAAU,EAACC,uCAAkB,CAAC;EAElC,MAAMC,UAAU,GAAG,IAAAC,cAAO,EAAC,MAAMT,aAAa,KAAKD,KAAK,EAAE,CAACA,KAAK,EAAEC,aAAa,CAAC,CAAC;EAEjF,MAAMU,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAOT,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,oBACI9B,MAAA,CAAAe,OAAA,CAAAsB,aAAA,CAACjC,YAAA,CAAAkC,iBAAiB;IAACC,OAAO,EAAEH,WAAY;IAACI,WAAW,EAAEN;EAAW,gBAC7DlC,MAAA,CAAAe,OAAA,CAAAsB,aAAA,CAACjC,YAAA,CAAAqC,2BAA2B,MAAE,CAAC,eAC/BzC,MAAA,CAAAe,OAAA,CAAAsB,aAAA,CAACjC,YAAA,CAAAsC,sBAAsB;IAACC,MAAM,EAAElB;EAAM,CAAE,CACzB,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACoB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,GAEzBS,WAAW","ignoreList":[]}
+{"version":3,"file":"PresetColor.js","names":["_core","require","_react","_interopRequireWildcard","_ColorPickerProvider","_PresetColor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PresetColor","color","shouldEnableKeyboardHighlighting","isKeyboardFocusable","presetIndex","onFocus","selectedColor","updateSelectedColor","updateHueColor","updateShouldCallOnSelect","updateShouldGetCoordinates","updateIsPresetColor","useContext","ColorPickerContext","isSelected","useMemo","presetColorRef","useRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","padding","handleClick","handleKeyDown","event","key","preventDefault","createElement","StyledPresetColor","ref","onClick","onKeyDown","$isSelected","role","tabIndex","StyledPresetColorBackground","StyledPresetColorColor","$color","displayName","_default","exports"],"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":"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","ignoreList":[]}

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

@@ -14,7 +14,8 @@ var _Sliders = require("./Sliders.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Sliders = ({
-  shouldShowTransparencySlider
+  shouldShowTransparencySlider,
+  shouldEnableKeyboardHighlighting
 }) => {
   const {
     selectedColor,
@@ -34,6 +35,9 @@ const Sliders = ({
     if (typeof updateHueColor === 'function' && color) {
       updateHueColor(color);
     }
+    if (typeof updateSelectedColor === 'function' && color) {
+      updateSelectedColor(color);
+    }
   };
   const handleStart = () => {
     if (typeof updateShouldGetCoordinates === 'function') {
@@ -61,12 +65,14 @@ const Sliders = ({
     opacity: opacity,
     onEnd: handleEnd,
     onStart: handleHueStart,
-    onChange: handleHueColorChange
+    onChange: handleHueColorChange,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }), shouldShowTransparencySlider && /*#__PURE__*/_react.default.createElement(_TransparencySlider.default, {
     color: selectedColor,
     onEnd: handleEnd,
     onStart: handleStart,
-    onChange: handleColorChange
+    onChange: handleColorChange,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   })), /*#__PURE__*/_react.default.createElement(_ColorPreview.default, null));
 };
 Sliders.displayName = 'Sliders';

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

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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _colors = require("@chayns/colors");
+var _core = require("@chayns-components/core");
 var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../utils/color");
@@ -15,13 +16,21 @@ const HueSlider = ({
   onStart,
   onEnd,
   opacity,
-  color = 'rgba(255, 0, 0, 1)'
+  color = 'rgba(255, 0, 0, 1)',
+  shouldEnableKeyboardHighlighting
 }) => {
   const [editedValue, setEditedValue] = (0, _react.useState)(0);
   const [hslColor, setHslColor] = (0, _react.useState)('hsl(0, 0, 100)');
   const [internalOpacity, setInternalOpacity] = (0, _react.useState)(1);
   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/hue-slider/HueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_color","_HueSlider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","HueSlider","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","useState","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","useRef","sliderRef","useEffect","rgb","isValidRGBA","splitRgb","hexToRgb","g","b","a","hsl","convertColorToHsl","match","toString","parseInt","handleInputChange","useCallback","event","Number","target","value","percentage","hue","saturation","lightness","hslToRgb255","h","s","l","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","extractHsl","handleEnd","createElement","StyledHueSlider","StyledHueSliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledHueSliderThumb","$position","displayName","_default","exports"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\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            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\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' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HueSlider.js","names":["_colors","require","_core","_chaynsApi","_react","_interopRequireWildcard","_color","_HueSlider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","HueSlider","onChange","onStart","onEnd","opacity","color","shouldEnableKeyboardHighlighting","editedValue","setEditedValue","useState","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","useRef","sliderRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","overlayRef","shape","padding","useEffect","rgb","isValidRGBA","splitRgb","hexToRgb","g","b","a","hsl","convertColorToHsl","match","toString","parseInt","handleInputChange","useCallback","event","Number","target","value","percentage","hue","saturation","lightness","hslToRgb255","h","s","l","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","extractHsl","handleEnd","createElement","StyledHueSlider","StyledHueSliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledHueSliderThumb","$position","displayName","_default","exports"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n    /**\n     * Enables keyboard-only focus highlighting for the slider.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\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            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\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' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}