@chayns-components/color-picker 5.5.30 → 5.5.34

package/AGENTS.md

@@ -93,6 +93,7 @@ import { ColorPicker } from '@chayns-components/color-picker';
 | `onSelect` | `((color: string) => void) \| undefined` | no | Function to be executed when a color is selected. |
 | `presetColors` | `IPresetColor[] \| undefined` | no | Colors the user can select from. |
 | `selectedColor` | `string \| undefined` | no | The color that should be preselected. |
+| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for color picker controls. |
 | `shouldHideColorArea` | `boolean \| undefined` | no | Whether the color area should be displayed. |
 | `shouldHideDefaultPresetColors` | `boolean \| undefined` | no | Whether the default preset colors should be hidden. |
 | `shouldShowAsPopup` | `boolean \| undefined` | no | Whether the ColorPicker should be displayed inside a popup. |
@@ -140,7 +141,10 @@ import { ColorPickerPopup } from '@chayns-components/color-picker';
 | --- | --- | --- | --- |
 | `onPresetColorAdd` | `((presetColor: IPresetColor) => void) \| undefined` | no | No description available. |
 | `onPresetColorRemove` | `((presetColorId: string) => void) \| undefined` | no | No description available. |
+| `onSelect` | `((color: string) => void) \| undefined` | no | No description available. |
 | `presetColors` | `IPresetColor[] \| undefined` | no | No description available. |
+| `selectedColor` | `string \| undefined` | no | No description available. |
+| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | No description available. |
 | `shouldHideColorArea` | `boolean` | yes | No description available. |
 | `shouldHideDefaultPresetColors` | `boolean` | yes | No description available. |
 | `shouldShowMoreOptions` | `boolean` | yes | No description available. |
@@ -189,6 +193,7 @@ import { HueSlider } from '@chayns-components/color-picker';
 | `onEnd` | `((rgb: Color \| undefined, hsl: Color \| undefined) => void) \| undefined` | no | Function that will be executed when the color is ending to change. |
 | `onStart` | `((rgb: Color \| undefined, hsl: Color \| undefined) => void) \| undefined` | no | Function that will be executed when the color is starting to change. |
 | `opacity` | `number \| undefined` | no | The opacity of the Color. Is used if the color has no opacity value. |
+| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for the slider. |
 
 ### Types
 
@@ -231,6 +236,7 @@ import { TransparencySlider } from '@chayns-components/color-picker';
 | `onChange` | `((color: string) => void) \| undefined` | no | Function that will be executed when the opacity is changed. |
 | `onEnd` | `((color: string) => void) \| undefined` | no | Function that will be executed when the opacity is ending to change. |
 | `onStart` | `((color: string) => void) \| undefined` | no | Function that will be executed when the opacity is starting to change. |
+| `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for the slider. |
 
 ### Types
 

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

@@ -25,7 +25,8 @@ const ColorPicker = ({
   shouldShowRoundPreviewColor = true,
   shouldShowTransparencySlider = false,
   shouldUseSiteColors = false,
-  alignment
+  alignment,
+  shouldEnableKeyboardHighlighting
 }) => /*#__PURE__*/_react.default.createElement(_ColorPickerProvider.default, {
   selectedColor: selectedColor,
   onSelect: onSelect
@@ -42,7 +43,8 @@ const ColorPicker = ({
   shouldShowRoundPreviewColor: shouldShowRoundPreviewColor,
   shouldShowTransparencySlider: shouldShowTransparencySlider,
   shouldUseSiteColors: shouldUseSiteColors,
-  shouldHideColorArea: shouldHideColorArea
+  shouldHideColorArea: shouldHideColorArea,
+  shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
 }, children)));
 ColorPicker.displayName = 'ColorPicker';
 var _default = exports.default = ColorPicker;

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["_react","_interopRequireDefault","require","_ColorPickerProvider","_ColorPickerWrapper","_ColorPicker","e","__esModule","default","ColorPicker","children","onPresetColorAdd","onPresetColorRemove","onSelect","shouldHideColorArea","shouldHideDefaultPresetColors","presetColors","selectedColor","shouldShowAsPopup","shouldShowMoreOptions","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldShowTransparencySlider","shouldUseSiteColors","alignment","createElement","StyledColorPicker","displayName","_default","exports"],"sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\nimport { PopupAlignment } from '@chayns-components/core';\n\ninterface ColorPickerProps {\n    /**\n     * The element that should be rendered to trigger the ColorPicker popup on click.\n     */\n    children?: ReactNode;\n    /**\n     * Function to be executed when a preset color is added.\n     */\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    /**\n     * Function to be executed when a preset color is removed.\n     */\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * Colors the user can select from.\n     */\n    presetColors?: IPresetColor[];\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n    /**\n     * Whether the ColorPicker should be displayed inside a popup.\n     */\n    shouldShowAsPopup?: boolean;\n    /**\n     * Whether the more options accordion should be displayed.\n     */\n    shouldShowMoreOptions?: boolean;\n    /**\n     * Whether the preset colors should be displayed.\n     */\n    shouldShowPresetColors?: boolean;\n    /**\n     * Whether the preview color should be displayed as text.\n     */\n    shouldShowPreviewColorString?: boolean;\n    /**\n     * Whether the preview color should be displayed round.\n     */\n    shouldShowRoundPreviewColor?: boolean;\n    /**\n     * Whether the transparency slider should be displayed.\n     */\n    shouldShowTransparencySlider?: boolean;\n    /**\n     * Whether presetColors should be got and uploaded to the site storage.\n     */\n    shouldUseSiteColors?: boolean;\n    /**\n     * Whether the color area should be displayed.\n     */\n    shouldHideColorArea?: boolean;\n    /**\n     * Whether the default preset colors should be hidden.\n     */\n    shouldHideDefaultPresetColors?: boolean;\n    /**\n     * The alignment of the popup\n     */\n    alignment?: PopupAlignment;\n}\n\nconst ColorPicker = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    onSelect,\n    shouldHideColorArea = false,\n    shouldHideDefaultPresetColors = false,\n    presetColors,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    shouldShowAsPopup = true,\n    shouldShowMoreOptions = false,\n    shouldShowPresetColors = false,\n    shouldShowPreviewColorString = true,\n    shouldShowRoundPreviewColor = true,\n    shouldShowTransparencySlider = false,\n    shouldUseSiteColors = false,\n    alignment,\n}: ColorPickerProps) => (\n    <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n        <StyledColorPicker>\n            <ColorPickerWrapper\n                alignment={alignment}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n                presetColors={presetColors}\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                shouldShowAsPopup={shouldShowAsPopup}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowPresetColors={shouldShowPresetColors}\n                shouldShowPreviewColorString={shouldShowPreviewColorString}\n                shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldHideColorArea={shouldHideColorArea}\n            >\n                {children}\n            </ColorPickerWrapper>\n        </StyledColorPicker>\n    </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,oBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAAyD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAsEzD,MAAMG,WAAW,GAAGA,CAAC;EACjBC,QAAQ;EACRC,gBAAgB;EAChBC,mBAAmB;EACnBC,QAAQ;EACRC,mBAAmB,GAAG,KAAK;EAC3BC,6BAA6B,GAAG,KAAK;EACrCC,YAAY;EACZC,aAAa,GAAG,qBAAqB;EACrCC,iBAAiB,GAAG,IAAI;EACxBC,qBAAqB,GAAG,KAAK;EAC7BC,sBAAsB,GAAG,KAAK;EAC9BC,4BAA4B,GAAG,IAAI;EACnCC,2BAA2B,GAAG,IAAI;EAClCC,4BAA4B,GAAG,KAAK;EACpCC,mBAAmB,GAAG,KAAK;EAC3BC;AACc,CAAC,kBACfzB,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACvB,oBAAA,CAAAK,OAAmB;EAACS,aAAa,EAAEA,aAAc;EAACJ,QAAQ,EAAEA;AAAS,gBAClEb,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACrB,YAAA,CAAAsB,iBAAiB,qBACd3B,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACtB,mBAAA,CAAAI,OAAkB;EACfiB,SAAS,EAAEA,SAAU;EACrBd,gBAAgB,EAAEA,gBAAiB;EACnCC,mBAAmB,EAAEA,mBAAoB;EACzCI,YAAY,EAAEA,YAAa;EAC3BD,6BAA6B,EAAEA,6BAA8B;EAC7DG,iBAAiB,EAAEA,iBAAkB;EACrCC,qBAAqB,EAAEA,qBAAsB;EAC7CC,sBAAsB,EAAEA,sBAAuB;EAC/CC,4BAA4B,EAAEA,4BAA6B;EAC3DC,2BAA2B,EAAEA,2BAA4B;EACzDC,4BAA4B,EAAEA,4BAA6B;EAC3DC,mBAAmB,EAAEA,mBAAoB;EACzCV,mBAAmB,EAAEA;AAAoB,GAExCJ,QACe,CACL,CACF,CACxB;AAEDD,WAAW,CAACmB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtB,OAAA,GAEzBC,WAAW","ignoreList":[]}
+{"version":3,"file":"ColorPicker.js","names":["_react","_interopRequireDefault","require","_ColorPickerProvider","_ColorPickerWrapper","_ColorPicker","e","__esModule","default","ColorPicker","children","onPresetColorAdd","onPresetColorRemove","onSelect","shouldHideColorArea","shouldHideDefaultPresetColors","presetColors","selectedColor","shouldShowAsPopup","shouldShowMoreOptions","shouldShowPresetColors","shouldShowPreviewColorString","shouldShowRoundPreviewColor","shouldShowTransparencySlider","shouldUseSiteColors","alignment","shouldEnableKeyboardHighlighting","createElement","StyledColorPicker","displayName","_default","exports"],"sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\nimport { PopupAlignment } from '@chayns-components/core';\n\ninterface ColorPickerProps {\n    /**\n     * The element that should be rendered to trigger the ColorPicker popup on click.\n     */\n    children?: ReactNode;\n    /**\n     * Function to be executed when a preset color is added.\n     */\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    /**\n     * Function to be executed when a preset color is removed.\n     */\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * Colors the user can select from.\n     */\n    presetColors?: IPresetColor[];\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n    /**\n     * Whether the ColorPicker should be displayed inside a popup.\n     */\n    shouldShowAsPopup?: boolean;\n    /**\n     * Whether the more options accordion should be displayed.\n     */\n    shouldShowMoreOptions?: boolean;\n    /**\n     * Whether the preset colors should be displayed.\n     */\n    shouldShowPresetColors?: boolean;\n    /**\n     * Whether the preview color should be displayed as text.\n     */\n    shouldShowPreviewColorString?: boolean;\n    /**\n     * Whether the preview color should be displayed round.\n     */\n    shouldShowRoundPreviewColor?: boolean;\n    /**\n     * Whether the transparency slider should be displayed.\n     */\n    shouldShowTransparencySlider?: boolean;\n    /**\n     * Whether presetColors should be got and uploaded to the site storage.\n     */\n    shouldUseSiteColors?: boolean;\n    /**\n     * Whether the color area should be displayed.\n     */\n    shouldHideColorArea?: boolean;\n    /**\n     * Whether the default preset colors should be hidden.\n     */\n    shouldHideDefaultPresetColors?: boolean;\n    /**\n     * The alignment of the popup\n     */\n    alignment?: PopupAlignment;\n    /**\n     * Enables keyboard-only focus highlighting for color picker controls.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst ColorPicker = ({\n    children,\n    onPresetColorAdd,\n    onPresetColorRemove,\n    onSelect,\n    shouldHideColorArea = false,\n    shouldHideDefaultPresetColors = false,\n    presetColors,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    shouldShowAsPopup = true,\n    shouldShowMoreOptions = false,\n    shouldShowPresetColors = false,\n    shouldShowPreviewColorString = true,\n    shouldShowRoundPreviewColor = true,\n    shouldShowTransparencySlider = false,\n    shouldUseSiteColors = false,\n    alignment,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerProps) => (\n    <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n        <StyledColorPicker>\n            <ColorPickerWrapper\n                alignment={alignment}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n                presetColors={presetColors}\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                shouldShowAsPopup={shouldShowAsPopup}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowPresetColors={shouldShowPresetColors}\n                shouldShowPreviewColorString={shouldShowPreviewColorString}\n                shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                shouldUseSiteColors={shouldUseSiteColors}\n                shouldHideColorArea={shouldHideColorArea}\n                shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n            >\n                {children}\n            </ColorPickerWrapper>\n        </StyledColorPicker>\n    </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,oBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAAyD,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AA0EzD,MAAMG,WAAW,GAAGA,CAAC;EACjBC,QAAQ;EACRC,gBAAgB;EAChBC,mBAAmB;EACnBC,QAAQ;EACRC,mBAAmB,GAAG,KAAK;EAC3BC,6BAA6B,GAAG,KAAK;EACrCC,YAAY;EACZC,aAAa,GAAG,qBAAqB;EACrCC,iBAAiB,GAAG,IAAI;EACxBC,qBAAqB,GAAG,KAAK;EAC7BC,sBAAsB,GAAG,KAAK;EAC9BC,4BAA4B,GAAG,IAAI;EACnCC,2BAA2B,GAAG,IAAI;EAClCC,4BAA4B,GAAG,KAAK;EACpCC,mBAAmB,GAAG,KAAK;EAC3BC,SAAS;EACTC;AACc,CAAC,kBACf1B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACxB,oBAAA,CAAAK,OAAmB;EAACS,aAAa,EAAEA,aAAc;EAACJ,QAAQ,EAAEA;AAAS,gBAClEb,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACtB,YAAA,CAAAuB,iBAAiB,qBACd5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,mBAAA,CAAAI,OAAkB;EACfiB,SAAS,EAAEA,SAAU;EACrBd,gBAAgB,EAAEA,gBAAiB;EACnCC,mBAAmB,EAAEA,mBAAoB;EACzCI,YAAY,EAAEA,YAAa;EAC3BD,6BAA6B,EAAEA,6BAA8B;EAC7DG,iBAAiB,EAAEA,iBAAkB;EACrCC,qBAAqB,EAAEA,qBAAsB;EAC7CC,sBAAsB,EAAEA,sBAAuB;EAC/CC,4BAA4B,EAAEA,4BAA6B;EAC3DC,2BAA2B,EAAEA,2BAA4B;EACzDC,4BAA4B,EAAEA,4BAA6B;EAC3DC,mBAAmB,EAAEA,mBAAoB;EACzCV,mBAAmB,EAAEA,mBAAoB;EACzCY,gCAAgC,EAAEA;AAAiC,GAElEhB,QACe,CACL,CACF,CACxB;AAEDD,WAAW,CAACoB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvB,OAAA,GAEzBC,WAAW","ignoreList":[]}

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

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _core = require("@chayns-components/core");
 var _react = _interopRequireWildcard(require("react"));
-var _ColorPickerPopup = _interopRequireDefault(require("../../color-picker-popup/ColorPickerPopup"));
+var _ColorPickerPopup = require("../../color-picker-popup/ColorPickerPopup");
 var _ColorPickerProvider = require("../../ColorPickerProvider");
 var _ColorPickerWrapper = require("./ColorPickerWrapper.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 ColorPickerWrapper = ({
   children,
@@ -25,12 +24,13 @@ const ColorPickerWrapper = ({
   shouldHideColorArea,
   shouldShowTransparencySlider,
   shouldUseSiteColors,
-  alignment
+  alignment,
+  shouldEnableKeyboardHighlighting
 }) => {
   const {
     selectedColor
   } = (0, _react.useContext)(_ColorPickerProvider.ColorPickerContext);
-  const content = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.default, {
+  const content = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.ColorPickerPopupContent, {
     shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
     shouldHideColorArea: shouldHideColorArea,
     shouldShowPresetColors: shouldShowPresetColors,
@@ -39,8 +39,9 @@ const ColorPickerWrapper = ({
     presetColors: presetColors,
     shouldUseSiteColors: shouldUseSiteColors,
     shouldShowMoreOptions: shouldShowMoreOptions,
-    shouldShowTransparencySlider: shouldShowTransparencySlider
-  }), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldHideColorArea, shouldHideDefaultPresetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider, shouldUseSiteColors]);
+    shouldShowTransparencySlider: shouldShowTransparencySlider,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldHideColorArea, shouldHideDefaultPresetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider, shouldUseSiteColors, shouldEnableKeyboardHighlighting]);
   return /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapper, null, shouldShowAsPopup ? /*#__PURE__*/_react.default.createElement(_core.Popup, {
     content: content,
     alignment: alignment

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

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

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.ColorPickerPopupContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ColorPickerProvider = _interopRequireDefault(require("../ColorPickerProvider"));
 var _ColorArea = _interopRequireDefault(require("./color-area/ColorArea"));
 var _ColorPickerPopup = require("./ColorPickerPopup.styles");
 var _MoreOptions = _interopRequireDefault(require("./more-options/MoreOptions"));
@@ -12,7 +13,8 @@ var _PresetColors = _interopRequireDefault(require("./preset-colors/PresetColors
 var _Sliders = _interopRequireDefault(require("./sliders/Sliders"));
 var _textstring = require("@chayns-components/textstring");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ColorPickerPopup = ({
+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 ColorPickerPopupContent = ({
   presetColors,
   onPresetColorRemove,
   onPresetColorAdd,
@@ -21,18 +23,47 @@ const ColorPickerPopup = ({
   shouldHideDefaultPresetColors,
   shouldUseSiteColors,
   shouldShowMoreOptions,
-  shouldHideColorArea
-}) => /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.StyledColorPickerPopup, null, !shouldHideColorArea && /*#__PURE__*/_react.default.createElement(_ColorArea.default, null), !shouldHideColorArea && /*#__PURE__*/_react.default.createElement(_Sliders.default, {
-  shouldShowTransparencySlider: shouldShowTransparencySlider
-}), shouldShowPresetColors && /*#__PURE__*/_react.default.createElement(_PresetColors.default, {
-  shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
-  presetColors: presetColors,
-  shouldUseSiteColors: shouldUseSiteColors,
-  onPresetColorAdd: onPresetColorAdd,
-  onPresetColorRemove: onPresetColorRemove
-}), shouldShowMoreOptions && /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
-  libraryName: "@chayns-components-color-picker"
-}, /*#__PURE__*/_react.default.createElement(_MoreOptions.default, null)));
+  shouldHideColorArea,
+  shouldEnableKeyboardHighlighting
+}) => {
+  const popupRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const animationFrameId = window.requestAnimationFrame(() => {
+      var _popupRef$current;
+      (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || (_popupRef$current = _popupRef$current.querySelector('[tabindex="0"], input:not([disabled]), button:not([disabled])')) === null || _popupRef$current === void 0 || _popupRef$current.focus();
+    });
+    return () => window.cancelAnimationFrame(animationFrameId);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.StyledColorPickerPopup, {
+    ref: popupRef
+  }, !shouldHideColorArea && /*#__PURE__*/_react.default.createElement(_ColorArea.default, {
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }), !shouldHideColorArea && /*#__PURE__*/_react.default.createElement(_Sliders.default, {
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+    shouldShowTransparencySlider: shouldShowTransparencySlider
+  }), shouldShowPresetColors && /*#__PURE__*/_react.default.createElement(_PresetColors.default, {
+    shouldHideDefaultPresetColors: shouldHideDefaultPresetColors,
+    presetColors: presetColors,
+    shouldUseSiteColors: shouldUseSiteColors,
+    onPresetColorAdd: onPresetColorAdd,
+    onPresetColorRemove: onPresetColorRemove,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }), shouldShowMoreOptions && /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
+    libraryName: "@chayns-components-color-picker"
+  }, /*#__PURE__*/_react.default.createElement(_MoreOptions.default, {
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  })));
+};
+exports.ColorPickerPopupContent = ColorPickerPopupContent;
+ColorPickerPopupContent.displayName = 'ColorPickerPopupContent';
+const ColorPickerPopup = ({
+  onSelect,
+  selectedColor = 'rgba(0, 94, 184, 1)',
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_ColorPickerProvider.default, {
+  onSelect: onSelect,
+  selectedColor: selectedColor
+}, /*#__PURE__*/_react.default.createElement(ColorPickerPopupContent, props));
 ColorPickerPopup.displayName = 'ColorPickerPopup';
 var _default = exports.default = ColorPickerPopup;
 //# sourceMappingURL=ColorPickerPopup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.js","names":["_react","_interopRequireDefault","require","_ColorArea","_ColorPickerPopup","_MoreOptions","_PresetColors","_Sliders","_textstring","e","__esModule","default","ColorPickerPopup","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","createElement","StyledColorPickerPopup","TextstringProvider","libraryName","displayName","_default","exports"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\ninterface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n}\n\nconst ColorPickerPopup = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n}: ColorPickerPopupProps) => (\n    <StyledColorPickerPopup>\n        {!shouldHideColorArea && <ColorArea />}\n        {!shouldHideColorArea && (\n            <Sliders shouldShowTransparencySlider={shouldShowTransparencySlider} />\n        )}\n        {shouldShowPresetColors && (\n            <PresetColors\n                shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                presetColors={presetColors}\n                shouldUseSiteColors={shouldUseSiteColors}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n            />\n        )}\n        {shouldShowMoreOptions && (\n            <TextstringProvider libraryName=\"@chayns-components-color-picker\">\n                <MoreOptions />\n            </TextstringProvider>\n        )}\n    </StyledColorPickerPopup>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,QAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AAAmE,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAcnE,MAAMG,gBAAgB,GAAGA,CAAC;EACtBC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC,6BAA6B;EAC7BC,mBAAmB;EACnBC,qBAAqB;EACrBC;AACmB,CAAC,kBACpBrB,MAAA,CAAAW,OAAA,CAAAW,aAAA,CAAClB,iBAAA,CAAAmB,sBAAsB,QAClB,CAACF,mBAAmB,iBAAIrB,MAAA,CAAAW,OAAA,CAAAW,aAAA,CAACnB,UAAA,CAAAQ,OAAS,MAAE,CAAC,EACrC,CAACU,mBAAmB,iBACjBrB,MAAA,CAAAW,OAAA,CAAAW,aAAA,CAACf,QAAA,CAAAI,OAAO;EAACM,4BAA4B,EAAEA;AAA6B,CAAE,CACzE,EACAD,sBAAsB,iBACnBhB,MAAA,CAAAW,OAAA,CAAAW,aAAA,CAAChB,aAAA,CAAAK,OAAY;EACTO,6BAA6B,EAAEA,6BAA8B;EAC7DL,YAAY,EAAEA,YAAa;EAC3BM,mBAAmB,EAAEA,mBAAoB;EACzCJ,gBAAgB,EAAEA,gBAAiB;EACnCD,mBAAmB,EAAEA;AAAoB,CAC5C,CACJ,EACAM,qBAAqB,iBAClBpB,MAAA,CAAAW,OAAA,CAAAW,aAAA,CAACd,WAAA,CAAAgB,kBAAkB;EAACC,WAAW,EAAC;AAAiC,gBAC7DzB,MAAA,CAAAW,OAAA,CAAAW,aAAA,CAACjB,YAAA,CAAAM,OAAW,MAAE,CACE,CAEJ,CAC3B;AAEDC,gBAAgB,CAACc,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEnCC,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ColorPickerPopup.js","names":["_react","_interopRequireWildcard","require","_ColorPickerProvider","_interopRequireDefault","_ColorArea","_ColorPickerPopup","_MoreOptions","_PresetColors","_Sliders","_textstring","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ColorPickerPopupContent","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldHideDefaultPresetColors","shouldUseSiteColors","shouldShowMoreOptions","shouldHideColorArea","shouldEnableKeyboardHighlighting","popupRef","useRef","useEffect","animationFrameId","window","requestAnimationFrame","_popupRef$current","current","querySelector","focus","cancelAnimationFrame","createElement","StyledColorPickerPopup","ref","TextstringProvider","libraryName","exports","displayName","ColorPickerPopup","onSelect","selectedColor","props","_default"],"sources":["../../../../src/components/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { IPresetColor } from '../../types/colorPicker';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport interface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldUseSiteColors: boolean;\n    shouldHideColorArea: boolean;\n    shouldHideDefaultPresetColors: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n    selectedColor?: string;\n    onSelect?: (color: string) => void;\n}\n\ntype ColorPickerPopupContentProps = Omit<ColorPickerPopupProps, 'onSelect' | 'selectedColor'>;\n\nexport const ColorPickerPopupContent = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldHideDefaultPresetColors,\n    shouldUseSiteColors,\n    shouldShowMoreOptions,\n    shouldHideColorArea,\n    shouldEnableKeyboardHighlighting,\n}: ColorPickerPopupContentProps) => {\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const animationFrameId = window.requestAnimationFrame(() => {\n            popupRef.current\n                ?.querySelector<HTMLElement>(\n                    '[tabindex=\"0\"], input:not([disabled]), button:not([disabled])',\n                )\n                ?.focus();\n        });\n\n        return () => window.cancelAnimationFrame(animationFrameId);\n    }, []);\n\n    return (\n        <StyledColorPickerPopup ref={popupRef}>\n            {!shouldHideColorArea && (\n                <ColorArea shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting} />\n            )}\n            {!shouldHideColorArea && (\n                <Sliders\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    shouldShowTransparencySlider={shouldShowTransparencySlider}\n                />\n            )}\n            {shouldShowPresetColors && (\n                <PresetColors\n                    shouldHideDefaultPresetColors={shouldHideDefaultPresetColors}\n                    presetColors={presetColors}\n                    shouldUseSiteColors={shouldUseSiteColors}\n                    onPresetColorAdd={onPresetColorAdd}\n                    onPresetColorRemove={onPresetColorRemove}\n                    shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                />\n            )}\n            {shouldShowMoreOptions && (\n                <TextstringProvider libraryName=\"@chayns-components-color-picker\">\n                    <MoreOptions\n                        shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n                    />\n                </TextstringProvider>\n            )}\n        </StyledColorPickerPopup>\n    );\n};\n\nColorPickerPopupContent.displayName = 'ColorPickerPopupContent';\n\nconst ColorPickerPopup = ({\n    onSelect,\n    selectedColor = 'rgba(0, 94, 184, 1)',\n    ...props\n}: ColorPickerPopupProps) => (\n    <ColorPickerProvider onSelect={onSelect} selectedColor={selectedColor}>\n        <ColorPickerPopupContent {...props} />\n    </ColorPickerProvider>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":"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","ignoreList":[]}

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

@@ -12,8 +12,11 @@ var _react2 = require("motion/react");
 var _color = require("../../../utils/color");
 var _ColorPickerProvider = require("../../ColorPickerProvider");
 var _core = require("@chayns-components/core");
+var _useColorAreaKeyboardNavigation = require("../../../hooks/useColorAreaKeyboardNavigation");
 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 ColorArea = () => {
+const ColorArea = ({
+  shouldEnableKeyboardHighlighting
+}) => {
   const {
     selectedColor,
     updateSelectedColor,
@@ -35,10 +38,18 @@ const ColorArea = () => {
   const canDrag = (0, _react.useRef)(false);
   const canvasRef = (0, _react.useRef)(null);
   const pseudoRef = (0, _react.useRef)(null);
+  const pointerRef = (0, _react.useRef)(null);
   const [shouldPreventListener, ref] = (0, _core.useIsMeasuredClone)();
   const dragControls = (0, _react2.useDragControls)();
   const x = (0, _react2.useMotionValue)(0);
   const y = (0, _react2.useMotionValue)(0);
+  const shouldShowKeyboardHighlighting = (0, _core.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  (0, _core.useFocusRingPortal)(pseudoRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: pointerRef,
+    shape: 'circle',
+    padding: 3
+  });
   (0, _react.useEffect)(() => {
     isPresetColorRef.current = isPresetColor ?? false;
   }, [isPresetColor]);
@@ -229,6 +240,13 @@ const ColorArea = () => {
     window.addEventListener('pointerup', endTouching);
     window.addEventListener('touchend', endTouching);
   }, [handleMouseMove, handlePointerUp, handleTouchMove, shouldPreventListener, updateShouldGetCoordinates]);
+  const handleKeyDown = (0, _useColorAreaKeyboardNavigation.useColorAreaKeyboardNavigation)({
+    move,
+    onChangeEnd: () => updateShouldCallOnSelect === null || updateShouldCallOnSelect === void 0 ? void 0 : updateShouldCallOnSelect(true),
+    onChangeStart: () => updateShouldGetCoordinates === null || updateShouldGetCoordinates === void 0 ? void 0 : updateShouldGetCoordinates(false),
+    x,
+    y
+  });
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorArea, {
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorAreaCanvas, {
@@ -236,8 +254,12 @@ const ColorArea = () => {
   }), /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorAreaPseudo, {
     ref: pseudoRef,
     onPointerDown: handleStartDrag,
-    onClick: handleClick
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    role: "slider",
+    tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement(_ColorArea.StyledMotionColorAreaPointer, {
+    ref: pointerRef,
     drag: true,
     dragConstraints: pseudoRef,
     style: {

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

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

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

@@ -19,6 +19,7 @@ const StyledColorAreaCanvas = exports.StyledColorAreaCanvas = _styledComponents.
     user-select: none;
 `;
 const StyledColorAreaPseudo = exports.StyledColorAreaPseudo = _styledComponents.default.div`
+    outline: none;
     position: absolute;
     top: -10px;
     left: -10px;

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

@@ -1 +1 @@
-{"version":3,"file":"ColorArea.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledColorArea","exports","styled","div","StyledColorAreaCanvas","canvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer","motion"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAGF,yBAAM,CAACG,MAAM;AAClD;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAL,OAAA,CAAAK,qBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAG,IAAAL,yBAAM,EAACM,aAAM,CAACL,GAAG,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorArea.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledColorArea","exports","styled","div","StyledColorAreaCanvas","canvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer","motion"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAGF,yBAAM,CAACG,MAAM;AAClD;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAL,OAAA,CAAAK,qBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAG,IAAAL,yBAAM,EAACM,aAAM,CAACL,GAAG,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -14,7 +14,9 @@ var _textstring = require("@chayns-components/textstring");
 var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
 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 MoreOptions = () => {
+const MoreOptions = ({
+  shouldEnableKeyboardHighlighting
+}) => {
   const {
     selectedColor,
     updateSelectedColor,
@@ -25,6 +27,30 @@ const MoreOptions = () => {
   const [tmpRgbValue, setTmpRgbValue] = (0, _react.useState)('');
   const [isHexInvalid, setIsHexInvalid] = (0, _react.useState)(false);
   const [isRgbInvalid, setIsRgbInvalid] = (0, _react.useState)(false);
+  const [areInputsMounted, setAreInputsMounted] = (0, _react.useState)(false);
+  const hexInputRef = (0, _react.useRef)(null);
+  const rgbInputRef = (0, _react.useRef)(null);
+  const shouldShowKeyboardHighlighting = (0, _core.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
+  (0, _core.useFocusRingPortal)(hexInputRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    updateKey: areInputsMounted
+  });
+  (0, _core.useFocusRingPortal)(rgbInputRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    updateKey: areInputsMounted
+  });
+  const setHexInputRef = (0, _react.useCallback)(element => {
+    hexInputRef.current = element;
+    if (element) {
+      setAreInputsMounted(true);
+    }
+  }, []);
+  const setRgbInputRef = (0, _react.useCallback)(element => {
+    rgbInputRef.current = element;
+    if (element) {
+      setAreInputsMounted(true);
+    }
+  }, []);
   const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   const handleHexChange = event => {
     setTmpHexValue(event.target.value);
@@ -79,11 +105,13 @@ const MoreOptions = () => {
   }, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     title: title
   }, /*#__PURE__*/_react.default.createElement(_MoreOptions.StyledMoreOptionsInputWrapper, null, /*#__PURE__*/_react.default.createElement(_MoreOptions.StyledMoreOptionsInput, {
+    ref: setHexInputRef,
     $shouldChangeColor: shouldChangeColor,
     value: tmpHexValue,
     onChange: handleHexChange,
     $isInvalid: isHexInvalid
   }), /*#__PURE__*/_react.default.createElement(_MoreOptions.StyledMoreOptionsInput, {
+    ref: setRgbInputRef,
     $shouldChangeColor: shouldChangeColor,
     value: tmpRgbValue,
     onChange: handleRgbChange,