npm - @neo4j-ndl/react - Versions diffs - 4.4.1 → 4.4.2 - Mend

@neo4j-ndl/react 4.4.1 → 4.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/lib/cjs/color-picker/ColorPicker.js +11 -5
package/lib/cjs/color-picker/ColorPicker.js.map +1 -1
package/lib/esm/color-picker/ColorPicker.js +12 -6
package/lib/esm/color-picker/ColorPicker.js.map +1 -1
package/lib/types/color-picker/ColorPicker.d.ts.map +1 -1
package/package.json +1 -1

package/lib/cjs/color-picker/ColorPicker.js CHANGED Viewed

@@ -47,17 +47,23 @@ const select_1 = require("../select");
 const text_input_1 = require("../text-input");
 exports.ColorPicker = (0, react_1.forwardRef)(function ColorPicker({ color, onChange, swatches = Object.values(base_1.tokens.graph).filter(react_color_1.validHex), shouldShowEyeDropper = true, className, style, }, ref) {
     const [isEyeDropperActiveState, setIsEyeDropperActiveState] = (0, react_1.useState)(false);
+    const derivedHsva = (0, react_1.useMemo)(() => {
+        if (typeof color === 'string') {
+            return (0, react_color_1.hexToHsva)(color);
+        }
+        if (typeof color === 'object' && 'r' in color) {
+            return (0, react_color_1.rgbaToHsva)(color);
+        }
+        return Object.assign(Object.assign({ h: 0, s: 0, v: 0 }, color), { a: 1 });
+    }, [color]);
+    const [hsva, setHsva] = (0, react_1.useState)(derivedHsva);
     const [format, setFormat] = (0, react_1.useState)({
         label: 'Hex',
         value: 'hex',
     });
     const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;
-    const hsva = typeof color === 'string'
-        ? (0, react_color_1.hexToHsva)(color)
-        : typeof color === 'object' && 'r' in color
-            ? (0, react_color_1.rgbaToHsva)(color)
-            : Object.assign(Object.assign({ h: 0, s: 0, v: 0 }, color), { a: 1 });
     const handleChange = (hsva) => {
+        setHsva(hsva);
         const hex = (0, react_color_1.hsvaToHex)(hsva);
         const rgb = (0, react_color_1.hsvaToRgba)(hsva);
         onChange({

package/lib/cjs/color-picker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n type HexColor,\n hexToHsva,\n type HsvaColor,\n hsvaToHex,\n hsvaToRgba,\n Hue,\n type PointerProps,\n type RgbaColor,\n rgbaToHex,\n rgbaToHsva,\n Saturation,\n validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\ntype ColorPickerProps = {\n /* The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. /\n color: HsvaColor \| RgbaColor \| HexColor;\n /* Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. /\n swatches?: (HsvaColor \| RgbaColor \| HexColor)[];\n /* Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. /\n shouldShowEyeDropper?: boolean;\n /* Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. /\n onChange: (newColor: {\n hex: HexColor;\n rgb: RgbaColor;\n hsva: HsvaColor;\n }) => void;\n /* Additional class name to apply to the root color picker container. /\n className?: string;\n /* Additional inline styles to apply to the root color picker container. */\n style?: React.CSSProperties;\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n function ColorPicker(\n {\n color,\n onChange,\n swatches = Object.values(tokens.graph).filter(validHex),\n shouldShowEyeDropper = true,\n className,\n style,\n },\n ref,\n ) {\n const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n useState(false);\n\n const [format, setFormat] = useState<{\n label: string;\n value: string;\n }>({\n label: 'Hex',\n value: 'hex',\n });\n\n const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n const hsva =\n typeof color === 'string'\n ? hexToHsva(color)\n : typeof color === 'object' && 'r' in color\n ? rgbaToHsva(color)\n : { h: 0, s: 0, v: 0, ...(color as object), a: 1 };\n\n const handleChange = (hsva: HsvaColor) => {\n const hex = hsvaToHex(hsva);\n const rgb = hsvaToRgba(hsva);\n onChange({\n // used since typescript cannot infer the type of the color\n hex: `#${hex.split('#')[1]}`,\n hsva,\n rgb,\n });\n };\n\n return (\n <div\n ref={ref}\n className={classNames('ndl-color-picker', className)}\n style={style}\n >\n <Saturation\n hsva={hsva}\n className=\"ndl-color-picker-saturation\"\n onChange={(newColor) => {\n handleChange({ ...hsva, ...newColor, a: hsva.a });\n }}\n pointer={({ left, top, ...props }) => (\n <Pointer\n left={left?.toString()}\n top={top?.toString()}\n {...props}\n hsva={hsva}\n />\n )}\n radius={tokens.borderRadius['lg']}\n />\n <Swatch\n colors={swatches}\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(newColor);\n }}\n />\n\n <div className=\"ndl-color-picker-hue-container\">\n {isEyeDropperActive && (\n <CleanIconButton\n size=\"small\"\n isActive={isEyeDropperActiveState}\n onClick={() => {\n setIsEyeDropperActiveState(true);\n // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper\n // Type assertion to handle the unknown type\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const eyeDropper = new (window as any).EyeDropper();\n eyeDropper\n .open()\n .then((result: { sRGBHex: string }) => {\n handleChange(hexToHsva(result.sRGBHex));\n })\n .catch((err: Error) => {\n console.error(err);\n })\n .finally(() => {\n setIsEyeDropperActiveState(false);\n });\n }}\n description=\"Pick color\"\n >\n <EyeDropperIconOutline />\n </CleanIconButton>\n )}\n <Hue\n className=\"ndl-color-picker-hue\"\n hue={hsva.h}\n onChange={(newHue) => {\n handleChange({ ...hsva, h: newHue.h });\n }}\n radius={tokens.borderRadius['lg']}\n pointer={(props) => (\n <Pointer\n {...props}\n hsva={{\n a: 1,\n h: hsva.h,\n s: 100,\n v: 100,\n }}\n />\n )}\n />\n </div>\n\n <div className=\"ndl-color-picker-inputs\">\n <Select\n size=\"small\"\n type=\"select\"\n ariaLabel=\"Color format\"\n style={{\n flexShrink: 0,\n }}\n selectProps={{\n isSearchable: false,\n onChange: (newFormat) => {\n if (!newFormat) {\n return;\n }\n setFormat({\n label: newFormat.label,\n value: newFormat.value,\n });\n },\n options: [\n {\n label: 'Hex',\n value: 'hex',\n },\n {\n label: 'RGB',\n value: 'rgb',\n },\n ],\n value: { label: format.label, value: format.value },\n }}\n />\n {format.value === 'hex' && (\n <HexInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n {format.value === 'rgb' && (\n <RgbInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n </div>\n </div>\n );\n },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const [inputValue, setInputValue] = useState<string>(() =>\n removeHashPrefix(hsvaToHex(hsva)),\n );\n\n // Update input value when hsva changes from outside\n useEffect(() => {\n setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n }, [hsva]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = removeHashPrefix(e.target.value);\n\n // Always update the input value for immediate feedback\n setInputValue(value);\n\n // Check if the input is a valid hex color (only 6 characters)\n const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n if (isValidHex) {\n onChange(`#${value}`);\n }\n };\n\n const hexValue = hsvaToHex(hsva);\n\n return (\n <TextInput\n size=\"small\"\n value={inputValue}\n leadingElement={\n <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n }\n onChange={handleChange}\n isFluid\n htmlAttributes={{\n 'aria-label': 'Hex color code',\n maxLength: 6,\n onCopy: (e) => {\n e.preventDefault();\n navigator.clipboard.writeText(hexValue);\n },\n }}\n />\n );\n};\n\nconst RgbInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const rgba = hsvaToRgba(hsva);\n const [rgbValues, setRgbValues] = useState({\n b: rgba.b,\n g: rgba.g,\n r: rgba.r,\n });\n\n // Update input values when hsva changes from outside\n useEffect(() => {\n const newRgba = hsvaToRgba(hsva);\n setRgbValues({\n b: newRgba.b,\n g: newRgba.g,\n r: newRgba.r,\n });\n }, [hsva]);\n\n const handleChange = (\n channel: 'r' \| 'g' \| 'b',\n e: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const value = parseInt(e.target.value, 10);\n\n // Validate the input is a number between 0-255\n const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n const newRgbValues = {\n ...rgbValues,\n [channel]: validValue,\n };\n\n setRgbValues(newRgbValues);\n\n // Convert RGB to hex and call onChange\n const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n onChange(hexColor);\n };\n\n return (\n <div className=\"ndl-color-picker-rgb-inputs\">\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.r.toString()}\n onChange={(e) => handleChange('r', e)}\n htmlAttributes={{\n 'aria-label': 'Red',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.g.toString()}\n onChange={(e) => handleChange('g', e)}\n htmlAttributes={{\n 'aria-label': 'Green',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.b.toString()}\n onChange={(e) => handleChange('b', e)}\n htmlAttributes={{\n 'aria-label': 'Blue',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n </div>\n );\n};\n\nconst Swatch = ({\n colors,\n onChange,\n hsva,\n}: {\n colors: (HsvaColor \| RgbaColor \| HexColor)[];\n hsva: HsvaColor;\n onChange: (newColor: HsvaColor) => void;\n}) => {\n return (\n <div className=\"ndl-color-picker-swatch\">\n {colors.map((color) => {\n const hexColor =\n typeof color === 'string'\n ? color\n : typeof color === 'object' && 'r' in color\n ? rgbaToHex(color)\n : hsvaToHex(color);\n const hsvaColor =\n typeof color === 'string'\n ? hexToHsva(color)\n : 'r' in color\n ? rgbaToHsva(color)\n : color;\n\n const isActive =\n hsva.h === hsvaColor.h &&\n hsva.s === hsvaColor.s &&\n hsva.v === hsvaColor.v;\n\n return (\n <button\n key={hexColor}\n aria-label={hexColor}\n className={classNames('ndl-color-picker-swatch-color', {\n 'ndl-color-picker-swatch-color-active': isActive,\n })}\n style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n onClick={() => onChange(hsvaColor)}\n />\n );\n })}\n </div>\n );\n};\nconst Pointer = ({\n prefixCls,\n left,\n top,\n hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n const rgba = hsvaToRgba(hsva);\n return (\n <div\n style={{\n backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n left,\n top,\n }}\n className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,+BAA6B;AAE7B,0CAAyC;AACzC,kDAa0B;AAC1B,4DAAoC;AACpC,iCAAiE;AAEjE,4DAAuD;AACvD,oCAAiD;AACjD,sCAAmC;AACnC,8CAA0C;AAqB7B,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,SAAS,WAAW,CAClB,EACE,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,aAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,sBAAQ,CAAC,EACvD,oBAAoB,GAAG,IAAI,EAC3B,SAAS,EACT,KAAK,GACN,EACD,GAAG;IAEH,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GACzD,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElB,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,IAAA,uBAAS,EAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC;YAC9C,OAAO,IAAA,wBAAU,EAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO,8BAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAM,KAAgB,KAAE,CAAC,EAAE,CAAC,GAAe,CAAC;IACvE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAY,WAAW,CAAC,CAAC;IAEzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAGjC;QACD,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,KAAK;KACb,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,YAAY,IAAI,MAAM,IAAI,oBAAoB,CAAC;IAE1E,MAAM,YAAY,GAAG,CAAC,IAAe,EAAE,EAAE;QACvC,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,MAAM,GAAG,GAAG,IAAA,uBAAS,EAAC,IAAI,CAAC,CAAC;QAC5B,MAAM,GAAG,GAAG,IAAA,wBAAU,EAAC,IAAI,CAAC,CAAC;QAC7B,QAAQ,CAAC;YACP,2DAA2D;YAC3D,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;YAC5B,IAAI;YACJ,GAAG;SACJ,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,kBAAkB,EAAE,SAAS,CAAC,EACpD,KAAK,EAAE,KAAK,aAEZ,uBAAC,wBAAU,IACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,6BAA6B,EACvC,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACrB,YAAY,+CAAM,IAAI,GAAK,QAAQ,KAAE,CAAC,EAAE,IAAI,CAAC,CAAC,IAAG,CAAC;gBACpD,CAAC,EACD,OAAO,EAAE,CAAC,EAAuB,EAAE,EAAE;wBAA3B,EAAE,IAAI,EAAE,GAAG,OAAY,EAAP,KAAK,cAArB,eAAuB,CAAF;oBAAO,OAAA,CACpC,uBAAC,OAAO,kBACN,IAAI,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,EAAE,EACtB,GAAG,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,EAAE,IAChB,KAAK,IACT,IAAI,EAAE,IAAI,IACV,CACH,CAAA;iBAAA,EACD,MAAM,EAAE,aAAM,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,EACF,uBAAC,MAAM,IACL,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACrB,YAAY,CAAC,QAAQ,CAAC,CAAC;gBACzB,CAAC,GACD,EAEF,iCAAK,SAAS,EAAC,gCAAgC,aAC5C,kBAAkB,IAAI,CACrB,uBAAC,mCAAe,IACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,uBAAuB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,0BAA0B,CAAC,IAAI,CAAC,CAAC;4BACjC,kIAAkI;4BAClI,4CAA4C;4BAC5C,8DAA8D;4BAC9D,MAAM,UAAU,GAAG,IAAK,MAAc,CAAC,UAAU,EAAE,CAAC;4BACpD,UAAU;iCACP,IAAI,EAAE;iCACN,IAAI,CAAC,CAAC,MAA2B,EAAE,EAAE;gCACpC,YAAY,CAAC,IAAA,uBAAS,EAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;4BAC1C,CAAC,CAAC;iCACD,KAAK,CAAC,CAAC,GAAU,EAAE,EAAE;gCACpB,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;4BACrB,CAAC,CAAC;iCACD,OAAO,CAAC,GAAG,EAAE;gCACZ,0BAA0B,CAAC,KAAK,CAAC,CAAC;4BACpC,CAAC,CAAC,CAAC;wBACP,CAAC,EACD,WAAW,EAAC,YAAY,YAExB,uBAAC,6BAAqB,KAAG,GACT,CACnB,EACD,uBAAC,iBAAG,IACF,SAAS,EAAC,sBAAsB,EAChC,GAAG,EAAE,IAAI,CAAC,CAAC,EACX,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;4BACnB,YAAY,iCAAM,IAAI,KAAE,CAAC,EAAE,MAAM,CAAC,CAAC,IAAG,CAAC;wBACzC,CAAC,EACD,MAAM,EAAE,aAAM,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAClB,uBAAC,OAAO,oBACF,KAAK,IACT,IAAI,EAAE;gCACJ,CAAC,EAAE,CAAC;gCACJ,CAAC,EAAE,IAAI,CAAC,CAAC;gCACT,CAAC,EAAE,GAAG;gCACN,CAAC,EAAE,GAAG;6BACP,IACD,CACH,GACD,IACE,EAEN,iCAAK,SAAS,EAAC,yBAAyB,aACtC,uBAAC,eAAM,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE;4BACL,UAAU,EAAE,CAAC;yBACd,EACD,WAAW,EAAE;4BACX,YAAY,EAAE,KAAK;4BACnB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE;gCACtB,IAAI,CAAC,SAAS,EAAE,CAAC;oCACf,OAAO;gCACT,CAAC;gCACD,SAAS,CAAC;oCACR,KAAK,EAAE,SAAS,CAAC,KAAK;oCACtB,KAAK,EAAE,SAAS,CAAC,KAAK;iCACvB,CAAC,CAAC;4BACL,CAAC;4BACD,OAAO,EAAE;gCACP;oCACE,KAAK,EAAE,KAAK;oCACZ,KAAK,EAAE,KAAK;iCACb;gCACD;oCACE,KAAK,EAAE,KAAK;oCACZ,KAAK,EAAE,KAAK;iCACb;6BACF;4BACD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE;yBACpD,GACD,EACD,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,CACzB,uBAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;4BACrB,YAAY,CAAC,IAAA,uBAAS,EAAC,QAAQ,CAAC,CAAC,CAAC;wBACpC,CAAC,GACD,CACH,EACA,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,CACzB,uBAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;4BACrB,YAAY,CAAC,IAAA,uBAAS,EAAC,QAAQ,CAAC,CAAC,CAAC;wBACpC,CAAC,GACD,CACH,IACG,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AAEvE,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAS,GAAG,EAAE,CACxD,gBAAgB,CAAC,IAAA,uBAAS,EAAC,IAAI,CAAC,CAAC,CAClC,CAAC;IAEF,oDAAoD;IACpD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,aAAa,CAAC,gBAAgB,CAAC,IAAA,uBAAS,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE/C,uDAAuD;QACvD,aAAa,CAAC,KAAK,CAAC,CAAC;QAErB,8DAA8D;QAC9D,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAElD,IAAI,UAAU,EAAE,CAAC;YACf,QAAQ,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,IAAA,uBAAS,EAAC,IAAI,CAAC,CAAC;IAEjC,OAAO,CACL,uBAAC,sBAAS,IACR,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAU,EACjB,cAAc,EACZ,gCAAK,SAAS,EAAC,mCAAmC,kBAAQ,EAE5D,QAAQ,EAAE,YAAY,EACtB,OAAO,QACP,cAAc,EAAE;YACd,YAAY,EAAE,gBAAgB;YAC9B,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAC1C,CAAC;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,IAAA,wBAAU,EAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC;QACzC,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,CAAC,EAAE,IAAI,CAAC,CAAC;KACV,CAAC,CAAC;IAEH,qDAAqD;IACrD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,IAAA,wBAAU,EAAC,IAAI,CAAC,CAAC;QACjC,YAAY,CAAC;YACX,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,CAAC,EAAE,OAAO,CAAC,CAAC;SACb,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,YAAY,GAAG,CACnB,OAAwB,EACxB,CAAsC,EACtC,EAAE;QACF,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAE3C,+CAA+C;QAC/C,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;QAExE,MAAM,YAAY,mCACb,SAAS,KACZ,CAAC,OAAO,CAAC,EAAE,UAAU,GACtB,CAAC;QAEF,YAAY,CAAC,YAAY,CAAC,CAAC;QAE3B,uCAAuC;QACvC,MAAM,QAAQ,GAAG,IAAI,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;QAClK,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,6BAA6B,aAC1C,uBAAC,sBAAS,IACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EACrC,cAAc,EAAE;oBACd,YAAY,EAAE,KAAK;oBACnB,GAAG,EAAE,KAAK;oBACV,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,QAAQ;iBACf,GACD,EACF,uBAAC,sBAAS,IACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EACrC,cAAc,EAAE;oBACd,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,KAAK;oBACV,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,QAAQ;iBACf,GACD,EACF,uBAAC,sBAAS,IACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EACrC,cAAc,EAAE;oBACd,YAAY,EAAE,MAAM;oBACpB,GAAG,EAAE,KAAK;oBACV,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,QAAQ;iBACf,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,EACd,MAAM,EACN,QAAQ,EACR,IAAI,GAKL,EAAE,EAAE;IACH,OAAO,CACL,gCAAK,SAAS,EAAC,yBAAyB,YACrC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACpB,MAAM,QAAQ,GACZ,OAAO,KAAK,KAAK,QAAQ;gBACvB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,GAAG,IAAI,KAAK;oBACzC,CAAC,CAAC,IAAA,uBAAS,EAAC,KAAK,CAAC;oBAClB,CAAC,CAAC,IAAA,uBAAS,EAAC,KAAK,CAAC,CAAC;YACzB,MAAM,SAAS,GACb,OAAO,KAAK,KAAK,QAAQ;gBACvB,CAAC,CAAC,IAAA,uBAAS,EAAC,KAAK,CAAC;gBAClB,CAAC,CAAC,GAAG,IAAI,KAAK;oBACZ,CAAC,CAAC,IAAA,wBAAU,EAAC,KAAK,CAAC;oBACnB,CAAC,CAAC,KAAK,CAAC;YAEd,MAAM,QAAQ,GACZ,IAAI,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;gBACtB,IAAI,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;gBACtB,IAAI,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC;YAEzB,OAAO,CACL,iDAEc,QAAQ,EACpB,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAA+B,EAAE;oBACrD,sCAAsC,EAAE,QAAQ;iBACjD,CAAC,EACF,KAAK,EAAE,EAAE,eAAe,EAAE,IAAA,uBAAS,EAAC,SAAS,CAAC,EAAE,EAChD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,IAN7B,QAAQ,CAOb,CACH,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,CAAC,EACf,SAAS,EACT,IAAI,EACJ,GAAG,EACH,IAAI,GAC+B,EAAE,EAAE;IACvC,MAAM,IAAI,GAAG,IAAA,wBAAU,EAAC,IAAI,CAAC,CAAC;IAC9B,OAAO,CACL,gCACE,KAAK,EAAE;YACL,eAAe,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG;YACnE,IAAI;YACJ,GAAG;SACJ,EACD,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,0BAA0B,CAAC,GAC5D,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n type HexColor,\n hexToHsva,\n type HsvaColor,\n hsvaToHex,\n hsvaToRgba,\n Hue,\n type PointerProps,\n type RgbaColor,\n rgbaToHex,\n rgbaToHsva,\n Saturation,\n validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\ntype ColorPickerProps = {\n /* The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. /\n color: HsvaColor \| RgbaColor \| HexColor;\n /* Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. /\n swatches?: (HsvaColor \| RgbaColor \| HexColor)[];\n /* Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. /\n shouldShowEyeDropper?: boolean;\n /* Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. /\n onChange: (newColor: {\n hex: HexColor;\n rgb: RgbaColor;\n hsva: HsvaColor;\n }) => void;\n /* Additional class name to apply to the root color picker container. /\n className?: string;\n /* Additional inline styles to apply to the root color picker container. */\n style?: React.CSSProperties;\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n function ColorPicker(\n {\n color,\n onChange,\n swatches = Object.values(tokens.graph).filter(validHex),\n shouldShowEyeDropper = true,\n className,\n style,\n },\n ref,\n ) {\n const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n useState(false);\n\n const derivedHsva = useMemo(() => {\n if (typeof color === 'string') {\n return hexToHsva(color);\n }\n if (typeof color === 'object' && 'r' in color) {\n return rgbaToHsva(color);\n }\n return { h: 0, s: 0, v: 0, ...(color as object), a: 1 } as HsvaColor;\n }, [color]);\n\n const [hsva, setHsva] = useState<HsvaColor>(derivedHsva);\n\n const [format, setFormat] = useState<{\n label: string;\n value: string;\n }>({\n label: 'Hex',\n value: 'hex',\n });\n\n const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n const handleChange = (hsva: HsvaColor) => {\n setHsva(hsva);\n const hex = hsvaToHex(hsva);\n const rgb = hsvaToRgba(hsva);\n onChange({\n // used since typescript cannot infer the type of the color\n hex: `#${hex.split('#')[1]}`,\n hsva,\n rgb,\n });\n };\n\n return (\n <div\n ref={ref}\n className={classNames('ndl-color-picker', className)}\n style={style}\n >\n <Saturation\n hsva={hsva}\n className=\"ndl-color-picker-saturation\"\n onChange={(newColor) => {\n handleChange({ ...hsva, ...newColor, a: hsva.a });\n }}\n pointer={({ left, top, ...props }) => (\n <Pointer\n left={left?.toString()}\n top={top?.toString()}\n {...props}\n hsva={hsva}\n />\n )}\n radius={tokens.borderRadius['lg']}\n />\n <Swatch\n colors={swatches}\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(newColor);\n }}\n />\n\n <div className=\"ndl-color-picker-hue-container\">\n {isEyeDropperActive && (\n <CleanIconButton\n size=\"small\"\n isActive={isEyeDropperActiveState}\n onClick={() => {\n setIsEyeDropperActiveState(true);\n // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper\n // Type assertion to handle the unknown type\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const eyeDropper = new (window as any).EyeDropper();\n eyeDropper\n .open()\n .then((result: { sRGBHex: string }) => {\n handleChange(hexToHsva(result.sRGBHex));\n })\n .catch((err: Error) => {\n console.error(err);\n })\n .finally(() => {\n setIsEyeDropperActiveState(false);\n });\n }}\n description=\"Pick color\"\n >\n <EyeDropperIconOutline />\n </CleanIconButton>\n )}\n <Hue\n className=\"ndl-color-picker-hue\"\n hue={hsva.h}\n onChange={(newHue) => {\n handleChange({ ...hsva, h: newHue.h });\n }}\n radius={tokens.borderRadius['lg']}\n pointer={(props) => (\n <Pointer\n {...props}\n hsva={{\n a: 1,\n h: hsva.h,\n s: 100,\n v: 100,\n }}\n />\n )}\n />\n </div>\n\n <div className=\"ndl-color-picker-inputs\">\n <Select\n size=\"small\"\n type=\"select\"\n ariaLabel=\"Color format\"\n style={{\n flexShrink: 0,\n }}\n selectProps={{\n isSearchable: false,\n onChange: (newFormat) => {\n if (!newFormat) {\n return;\n }\n setFormat({\n label: newFormat.label,\n value: newFormat.value,\n });\n },\n options: [\n {\n label: 'Hex',\n value: 'hex',\n },\n {\n label: 'RGB',\n value: 'rgb',\n },\n ],\n value: { label: format.label, value: format.value },\n }}\n />\n {format.value === 'hex' && (\n <HexInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n {format.value === 'rgb' && (\n <RgbInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n </div>\n </div>\n );\n },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const [inputValue, setInputValue] = useState<string>(() =>\n removeHashPrefix(hsvaToHex(hsva)),\n );\n\n // Update input value when hsva changes from outside\n useEffect(() => {\n setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n }, [hsva]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = removeHashPrefix(e.target.value);\n\n // Always update the input value for immediate feedback\n setInputValue(value);\n\n // Check if the input is a valid hex color (only 6 characters)\n const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n if (isValidHex) {\n onChange(`#${value}`);\n }\n };\n\n const hexValue = hsvaToHex(hsva);\n\n return (\n <TextInput\n size=\"small\"\n value={inputValue}\n leadingElement={\n <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n }\n onChange={handleChange}\n isFluid\n htmlAttributes={{\n 'aria-label': 'Hex color code',\n maxLength: 6,\n onCopy: (e) => {\n e.preventDefault();\n navigator.clipboard.writeText(hexValue);\n },\n }}\n />\n );\n};\n\nconst RgbInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const rgba = hsvaToRgba(hsva);\n const [rgbValues, setRgbValues] = useState({\n b: rgba.b,\n g: rgba.g,\n r: rgba.r,\n });\n\n // Update input values when hsva changes from outside\n useEffect(() => {\n const newRgba = hsvaToRgba(hsva);\n setRgbValues({\n b: newRgba.b,\n g: newRgba.g,\n r: newRgba.r,\n });\n }, [hsva]);\n\n const handleChange = (\n channel: 'r' \| 'g' \| 'b',\n e: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const value = parseInt(e.target.value, 10);\n\n // Validate the input is a number between 0-255\n const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n const newRgbValues = {\n ...rgbValues,\n [channel]: validValue,\n };\n\n setRgbValues(newRgbValues);\n\n // Convert RGB to hex and call onChange\n const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n onChange(hexColor);\n };\n\n return (\n <div className=\"ndl-color-picker-rgb-inputs\">\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.r.toString()}\n onChange={(e) => handleChange('r', e)}\n htmlAttributes={{\n 'aria-label': 'Red',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.g.toString()}\n onChange={(e) => handleChange('g', e)}\n htmlAttributes={{\n 'aria-label': 'Green',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.b.toString()}\n onChange={(e) => handleChange('b', e)}\n htmlAttributes={{\n 'aria-label': 'Blue',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n </div>\n );\n};\n\nconst Swatch = ({\n colors,\n onChange,\n hsva,\n}: {\n colors: (HsvaColor \| RgbaColor \| HexColor)[];\n hsva: HsvaColor;\n onChange: (newColor: HsvaColor) => void;\n}) => {\n return (\n <div className=\"ndl-color-picker-swatch\">\n {colors.map((color) => {\n const hexColor =\n typeof color === 'string'\n ? color\n : typeof color === 'object' && 'r' in color\n ? rgbaToHex(color)\n : hsvaToHex(color);\n const hsvaColor =\n typeof color === 'string'\n ? hexToHsva(color)\n : 'r' in color\n ? rgbaToHsva(color)\n : color;\n\n const isActive =\n hsva.h === hsvaColor.h &&\n hsva.s === hsvaColor.s &&\n hsva.v === hsvaColor.v;\n\n return (\n <button\n key={hexColor}\n aria-label={hexColor}\n className={classNames('ndl-color-picker-swatch-color', {\n 'ndl-color-picker-swatch-color-active': isActive,\n })}\n style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n onClick={() => onChange(hsvaColor)}\n />\n );\n })}\n </div>\n );\n};\nconst Pointer = ({\n prefixCls,\n left,\n top,\n hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n const rgba = hsvaToRgba(hsva);\n return (\n <div\n style={{\n backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n left,\n top,\n }}\n className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n />\n );\n};\n"]}

package/lib/esm/color-picker/ColorPicker.js CHANGED Viewed

@@ -34,24 +34,30 @@ import 'eyedropper-polyfill';
 import { tokens } from '@neo4j-ndl/base';
 import { hexToHsva, hsvaToHex, hsvaToRgba, Hue, rgbaToHex, rgbaToHsva, Saturation, validHex, } from '@uiw/react-color';
 import classNames from 'classnames';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { CleanIconButton } from '../clean-icon-button';
 import { EyeDropperIconOutline } from '../icons';
 import { Select } from '../select';
 import { TextInput } from '../text-input';
 export const ColorPicker = forwardRef(function ColorPicker({ color, onChange, swatches = Object.values(tokens.graph).filter(validHex), shouldShowEyeDropper = true, className, style, }, ref) {
     const [isEyeDropperActiveState, setIsEyeDropperActiveState] = useState(false);
+    const derivedHsva = useMemo(() => {
+        if (typeof color === 'string') {
+            return hexToHsva(color);
+        }
+        if (typeof color === 'object' && 'r' in color) {
+            return rgbaToHsva(color);
+        }
+        return Object.assign(Object.assign({ h: 0, s: 0, v: 0 }, color), { a: 1 });
+    }, [color]);
+    const [hsva, setHsva] = useState(derivedHsva);
     const [format, setFormat] = useState({
         label: 'Hex',
         value: 'hex',
     });
     const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;
-    const hsva = typeof color === 'string'
-        ? hexToHsva(color)
-        : typeof color === 'object' && 'r' in color
-            ? rgbaToHsva(color)
-            : Object.assign(Object.assign({ h: 0, s: 0, v: 0 }, color), { a: 1 });
     const handleChange = (hsva) => {
+        setHsva(hsva);
         const hex = hsvaToHex(hsva);
         const rgb = hsvaToRgba(hsva);
         onChange({

package/lib/esm/color-picker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n type HexColor,\n hexToHsva,\n type HsvaColor,\n hsvaToHex,\n hsvaToRgba,\n Hue,\n type PointerProps,\n type RgbaColor,\n rgbaToHex,\n rgbaToHsva,\n Saturation,\n validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\ntype ColorPickerProps = {\n /* The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. /\n color: HsvaColor \| RgbaColor \| HexColor;\n /* Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. /\n swatches?: (HsvaColor \| RgbaColor \| HexColor)[];\n /* Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. /\n shouldShowEyeDropper?: boolean;\n /* Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. /\n onChange: (newColor: {\n hex: HexColor;\n rgb: RgbaColor;\n hsva: HsvaColor;\n }) => void;\n /* Additional class name to apply to the root color picker container. /\n className?: string;\n /* Additional inline styles to apply to the root color picker container. */\n style?: React.CSSProperties;\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n function ColorPicker(\n {\n color,\n onChange,\n swatches = Object.values(tokens.graph).filter(validHex),\n shouldShowEyeDropper = true,\n className,\n style,\n },\n ref,\n ) {\n const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n useState(false);\n\n const [format, setFormat] = useState<{\n label: string;\n value: string;\n }>({\n label: 'Hex',\n value: 'hex',\n });\n\n const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n const hsva =\n typeof color === 'string'\n ? hexToHsva(color)\n : typeof color === 'object' && 'r' in color\n ? rgbaToHsva(color)\n : { h: 0, s: 0, v: 0, ...(color as object), a: 1 };\n\n const handleChange = (hsva: HsvaColor) => {\n const hex = hsvaToHex(hsva);\n const rgb = hsvaToRgba(hsva);\n onChange({\n // used since typescript cannot infer the type of the color\n hex: `#${hex.split('#')[1]}`,\n hsva,\n rgb,\n });\n };\n\n return (\n <div\n ref={ref}\n className={classNames('ndl-color-picker', className)}\n style={style}\n >\n <Saturation\n hsva={hsva}\n className=\"ndl-color-picker-saturation\"\n onChange={(newColor) => {\n handleChange({ ...hsva, ...newColor, a: hsva.a });\n }}\n pointer={({ left, top, ...props }) => (\n <Pointer\n left={left?.toString()}\n top={top?.toString()}\n {...props}\n hsva={hsva}\n />\n )}\n radius={tokens.borderRadius['lg']}\n />\n <Swatch\n colors={swatches}\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(newColor);\n }}\n />\n\n <div className=\"ndl-color-picker-hue-container\">\n {isEyeDropperActive && (\n <CleanIconButton\n size=\"small\"\n isActive={isEyeDropperActiveState}\n onClick={() => {\n setIsEyeDropperActiveState(true);\n // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper\n // Type assertion to handle the unknown type\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const eyeDropper = new (window as any).EyeDropper();\n eyeDropper\n .open()\n .then((result: { sRGBHex: string }) => {\n handleChange(hexToHsva(result.sRGBHex));\n })\n .catch((err: Error) => {\n console.error(err);\n })\n .finally(() => {\n setIsEyeDropperActiveState(false);\n });\n }}\n description=\"Pick color\"\n >\n <EyeDropperIconOutline />\n </CleanIconButton>\n )}\n <Hue\n className=\"ndl-color-picker-hue\"\n hue={hsva.h}\n onChange={(newHue) => {\n handleChange({ ...hsva, h: newHue.h });\n }}\n radius={tokens.borderRadius['lg']}\n pointer={(props) => (\n <Pointer\n {...props}\n hsva={{\n a: 1,\n h: hsva.h,\n s: 100,\n v: 100,\n }}\n />\n )}\n />\n </div>\n\n <div className=\"ndl-color-picker-inputs\">\n <Select\n size=\"small\"\n type=\"select\"\n ariaLabel=\"Color format\"\n style={{\n flexShrink: 0,\n }}\n selectProps={{\n isSearchable: false,\n onChange: (newFormat) => {\n if (!newFormat) {\n return;\n }\n setFormat({\n label: newFormat.label,\n value: newFormat.value,\n });\n },\n options: [\n {\n label: 'Hex',\n value: 'hex',\n },\n {\n label: 'RGB',\n value: 'rgb',\n },\n ],\n value: { label: format.label, value: format.value },\n }}\n />\n {format.value === 'hex' && (\n <HexInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n {format.value === 'rgb' && (\n <RgbInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n </div>\n </div>\n );\n },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const [inputValue, setInputValue] = useState<string>(() =>\n removeHashPrefix(hsvaToHex(hsva)),\n );\n\n // Update input value when hsva changes from outside\n useEffect(() => {\n setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n }, [hsva]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = removeHashPrefix(e.target.value);\n\n // Always update the input value for immediate feedback\n setInputValue(value);\n\n // Check if the input is a valid hex color (only 6 characters)\n const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n if (isValidHex) {\n onChange(`#${value}`);\n }\n };\n\n const hexValue = hsvaToHex(hsva);\n\n return (\n <TextInput\n size=\"small\"\n value={inputValue}\n leadingElement={\n <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n }\n onChange={handleChange}\n isFluid\n htmlAttributes={{\n 'aria-label': 'Hex color code',\n maxLength: 6,\n onCopy: (e) => {\n e.preventDefault();\n navigator.clipboard.writeText(hexValue);\n },\n }}\n />\n );\n};\n\nconst RgbInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const rgba = hsvaToRgba(hsva);\n const [rgbValues, setRgbValues] = useState({\n b: rgba.b,\n g: rgba.g,\n r: rgba.r,\n });\n\n // Update input values when hsva changes from outside\n useEffect(() => {\n const newRgba = hsvaToRgba(hsva);\n setRgbValues({\n b: newRgba.b,\n g: newRgba.g,\n r: newRgba.r,\n });\n }, [hsva]);\n\n const handleChange = (\n channel: 'r' \| 'g' \| 'b',\n e: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const value = parseInt(e.target.value, 10);\n\n // Validate the input is a number between 0-255\n const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n const newRgbValues = {\n ...rgbValues,\n [channel]: validValue,\n };\n\n setRgbValues(newRgbValues);\n\n // Convert RGB to hex and call onChange\n const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n onChange(hexColor);\n };\n\n return (\n <div className=\"ndl-color-picker-rgb-inputs\">\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.r.toString()}\n onChange={(e) => handleChange('r', e)}\n htmlAttributes={{\n 'aria-label': 'Red',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.g.toString()}\n onChange={(e) => handleChange('g', e)}\n htmlAttributes={{\n 'aria-label': 'Green',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.b.toString()}\n onChange={(e) => handleChange('b', e)}\n htmlAttributes={{\n 'aria-label': 'Blue',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n </div>\n );\n};\n\nconst Swatch = ({\n colors,\n onChange,\n hsva,\n}: {\n colors: (HsvaColor \| RgbaColor \| HexColor)[];\n hsva: HsvaColor;\n onChange: (newColor: HsvaColor) => void;\n}) => {\n return (\n <div className=\"ndl-color-picker-swatch\">\n {colors.map((color) => {\n const hexColor =\n typeof color === 'string'\n ? color\n : typeof color === 'object' && 'r' in color\n ? rgbaToHex(color)\n : hsvaToHex(color);\n const hsvaColor =\n typeof color === 'string'\n ? hexToHsva(color)\n : 'r' in color\n ? rgbaToHsva(color)\n : color;\n\n const isActive =\n hsva.h === hsvaColor.h &&\n hsva.s === hsvaColor.s &&\n hsva.v === hsvaColor.v;\n\n return (\n <button\n key={hexColor}\n aria-label={hexColor}\n className={classNames('ndl-color-picker-swatch-color', {\n 'ndl-color-picker-swatch-color-active': isActive,\n })}\n style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n onClick={() => onChange(hsvaColor)}\n />\n );\n })}\n </div>\n );\n};\nconst Pointer = ({\n prefixCls,\n left,\n top,\n hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n const rgba = hsvaToRgba(hsva);\n return (\n <div\n style={{\n backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n left,\n top,\n }}\n className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport 'eyedropper-polyfill';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport {\n type HexColor,\n hexToHsva,\n type HsvaColor,\n hsvaToHex,\n hsvaToRgba,\n Hue,\n type PointerProps,\n type RgbaColor,\n rgbaToHex,\n rgbaToHsva,\n Saturation,\n validHex,\n} from '@uiw/react-color';\nimport classNames from 'classnames';\nimport { forwardRef, useEffect, useMemo, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { EyeDropperIconOutline } from '../icons';\nimport { Select } from '../select';\nimport { TextInput } from '../text-input';\n\ntype ColorPickerProps = {\n /* The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. /\n color: HsvaColor \| RgbaColor \| HexColor;\n /* Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. /\n swatches?: (HsvaColor \| RgbaColor \| HexColor)[];\n /* Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. /\n shouldShowEyeDropper?: boolean;\n /* Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. /\n onChange: (newColor: {\n hex: HexColor;\n rgb: RgbaColor;\n hsva: HsvaColor;\n }) => void;\n /* Additional class name to apply to the root color picker container. /\n className?: string;\n /* Additional inline styles to apply to the root color picker container. */\n style?: React.CSSProperties;\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n function ColorPicker(\n {\n color,\n onChange,\n swatches = Object.values(tokens.graph).filter(validHex),\n shouldShowEyeDropper = true,\n className,\n style,\n },\n ref,\n ) {\n const [isEyeDropperActiveState, setIsEyeDropperActiveState] =\n useState(false);\n\n const derivedHsva = useMemo(() => {\n if (typeof color === 'string') {\n return hexToHsva(color);\n }\n if (typeof color === 'object' && 'r' in color) {\n return rgbaToHsva(color);\n }\n return { h: 0, s: 0, v: 0, ...(color as object), a: 1 } as HsvaColor;\n }, [color]);\n\n const [hsva, setHsva] = useState<HsvaColor>(derivedHsva);\n\n const [format, setFormat] = useState<{\n label: string;\n value: string;\n }>({\n label: 'Hex',\n value: 'hex',\n });\n\n const isEyeDropperActive = 'EyeDropper' in window && shouldShowEyeDropper;\n\n const handleChange = (hsva: HsvaColor) => {\n setHsva(hsva);\n const hex = hsvaToHex(hsva);\n const rgb = hsvaToRgba(hsva);\n onChange({\n // used since typescript cannot infer the type of the color\n hex: `#${hex.split('#')[1]}`,\n hsva,\n rgb,\n });\n };\n\n return (\n <div\n ref={ref}\n className={classNames('ndl-color-picker', className)}\n style={style}\n >\n <Saturation\n hsva={hsva}\n className=\"ndl-color-picker-saturation\"\n onChange={(newColor) => {\n handleChange({ ...hsva, ...newColor, a: hsva.a });\n }}\n pointer={({ left, top, ...props }) => (\n <Pointer\n left={left?.toString()}\n top={top?.toString()}\n {...props}\n hsva={hsva}\n />\n )}\n radius={tokens.borderRadius['lg']}\n />\n <Swatch\n colors={swatches}\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(newColor);\n }}\n />\n\n <div className=\"ndl-color-picker-hue-container\">\n {isEyeDropperActive && (\n <CleanIconButton\n size=\"small\"\n isActive={isEyeDropperActiveState}\n onClick={() => {\n setIsEyeDropperActiveState(true);\n // TODO: Remove the any casting when polyfiller is not needed anymore. https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper\n // Type assertion to handle the unknown type\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const eyeDropper = new (window as any).EyeDropper();\n eyeDropper\n .open()\n .then((result: { sRGBHex: string }) => {\n handleChange(hexToHsva(result.sRGBHex));\n })\n .catch((err: Error) => {\n console.error(err);\n })\n .finally(() => {\n setIsEyeDropperActiveState(false);\n });\n }}\n description=\"Pick color\"\n >\n <EyeDropperIconOutline />\n </CleanIconButton>\n )}\n <Hue\n className=\"ndl-color-picker-hue\"\n hue={hsva.h}\n onChange={(newHue) => {\n handleChange({ ...hsva, h: newHue.h });\n }}\n radius={tokens.borderRadius['lg']}\n pointer={(props) => (\n <Pointer\n {...props}\n hsva={{\n a: 1,\n h: hsva.h,\n s: 100,\n v: 100,\n }}\n />\n )}\n />\n </div>\n\n <div className=\"ndl-color-picker-inputs\">\n <Select\n size=\"small\"\n type=\"select\"\n ariaLabel=\"Color format\"\n style={{\n flexShrink: 0,\n }}\n selectProps={{\n isSearchable: false,\n onChange: (newFormat) => {\n if (!newFormat) {\n return;\n }\n setFormat({\n label: newFormat.label,\n value: newFormat.value,\n });\n },\n options: [\n {\n label: 'Hex',\n value: 'hex',\n },\n {\n label: 'RGB',\n value: 'rgb',\n },\n ],\n value: { label: format.label, value: format.value },\n }}\n />\n {format.value === 'hex' && (\n <HexInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n {format.value === 'rgb' && (\n <RgbInput\n hsva={hsva}\n onChange={(newColor) => {\n handleChange(hexToHsva(newColor));\n }}\n />\n )}\n </div>\n </div>\n );\n },\n);\n\nconst removeHashPrefix = (hex: string): string => hex.replace('#', '');\n\nconst HexInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const [inputValue, setInputValue] = useState<string>(() =>\n removeHashPrefix(hsvaToHex(hsva)),\n );\n\n // Update input value when hsva changes from outside\n useEffect(() => {\n setInputValue(removeHashPrefix(hsvaToHex(hsva)));\n }, [hsva]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = removeHashPrefix(e.target.value);\n\n // Always update the input value for immediate feedback\n setInputValue(value);\n\n // Check if the input is a valid hex color (only 6 characters)\n const isValidHex = /^[0-9A-Fa-f]{6}$/.test(value);\n\n if (isValidHex) {\n onChange(`#${value}`);\n }\n };\n\n const hexValue = hsvaToHex(hsva);\n\n return (\n <TextInput\n size=\"small\"\n value={inputValue}\n leadingElement={\n <div className=\"ndl-color-picker-hex-input-prefix\">#</div>\n }\n onChange={handleChange}\n isFluid\n htmlAttributes={{\n 'aria-label': 'Hex color code',\n maxLength: 6,\n onCopy: (e) => {\n e.preventDefault();\n navigator.clipboard.writeText(hexValue);\n },\n }}\n />\n );\n};\n\nconst RgbInput = ({\n hsva,\n onChange,\n}: {\n hsva: HsvaColor;\n onChange: (newColor: string) => void;\n}) => {\n const rgba = hsvaToRgba(hsva);\n const [rgbValues, setRgbValues] = useState({\n b: rgba.b,\n g: rgba.g,\n r: rgba.r,\n });\n\n // Update input values when hsva changes from outside\n useEffect(() => {\n const newRgba = hsvaToRgba(hsva);\n setRgbValues({\n b: newRgba.b,\n g: newRgba.g,\n r: newRgba.r,\n });\n }, [hsva]);\n\n const handleChange = (\n channel: 'r' \| 'g' \| 'b',\n e: React.ChangeEvent<HTMLInputElement>,\n ) => {\n const value = parseInt(e.target.value, 10);\n\n // Validate the input is a number between 0-255\n const validValue = isNaN(value) ? 0 : Math.max(0, Math.min(255, value));\n\n const newRgbValues = {\n ...rgbValues,\n [channel]: validValue,\n };\n\n setRgbValues(newRgbValues);\n\n // Convert RGB to hex and call onChange\n const hexColor = `#${newRgbValues.r.toString(16).padStart(2, '0')}${newRgbValues.g.toString(16).padStart(2, '0')}${newRgbValues.b.toString(16).padStart(2, '0')}`;\n onChange(hexColor);\n };\n\n return (\n <div className=\"ndl-color-picker-rgb-inputs\">\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.r.toString()}\n onChange={(e) => handleChange('r', e)}\n htmlAttributes={{\n 'aria-label': 'Red',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.g.toString()}\n onChange={(e) => handleChange('g', e)}\n htmlAttributes={{\n 'aria-label': 'Green',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n <TextInput\n size=\"small\"\n className=\"ndl-color-picker-rgb-input\"\n value={rgbValues.b.toString()}\n onChange={(e) => handleChange('b', e)}\n htmlAttributes={{\n 'aria-label': 'Blue',\n max: '255',\n min: '0',\n type: 'number',\n }}\n />\n </div>\n );\n};\n\nconst Swatch = ({\n colors,\n onChange,\n hsva,\n}: {\n colors: (HsvaColor \| RgbaColor \| HexColor)[];\n hsva: HsvaColor;\n onChange: (newColor: HsvaColor) => void;\n}) => {\n return (\n <div className=\"ndl-color-picker-swatch\">\n {colors.map((color) => {\n const hexColor =\n typeof color === 'string'\n ? color\n : typeof color === 'object' && 'r' in color\n ? rgbaToHex(color)\n : hsvaToHex(color);\n const hsvaColor =\n typeof color === 'string'\n ? hexToHsva(color)\n : 'r' in color\n ? rgbaToHsva(color)\n : color;\n\n const isActive =\n hsva.h === hsvaColor.h &&\n hsva.s === hsvaColor.s &&\n hsva.v === hsvaColor.v;\n\n return (\n <button\n key={hexColor}\n aria-label={hexColor}\n className={classNames('ndl-color-picker-swatch-color', {\n 'ndl-color-picker-swatch-color-active': isActive,\n })}\n style={{ backgroundColor: hsvaToHex(hsvaColor) }}\n onClick={() => onChange(hsvaColor)}\n />\n );\n })}\n </div>\n );\n};\nconst Pointer = ({\n prefixCls,\n left,\n top,\n hsva,\n}: PointerProps & { hsva: HsvaColor }) => {\n const rgba = hsvaToRgba(hsva);\n return (\n <div\n style={{\n backgroundColor: `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`,\n left,\n top,\n }}\n className={classNames(prefixCls, 'ndl-color-picker-pointer')}\n />\n );\n};\n"]}

package/lib/types/color-picker/ColorPicker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,qBAAqB,CAAC;AAG7B,OAAO,EACL,KAAK,QAAQ,EAEb,KAAK,SAAS,EAKd,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAC;AAS1B,KAAK,gBAAgB,GAAG;IACtB,iJAAiJ;IACjJ,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CAAC;IAChD,8GAA8G;IAC9G,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mKAAmK;IACnK,QAAQ,EAAE,CAAC,QAAQ,EAAE;QACnB,GAAG,EAAE,QAAQ,CAAC;QACd,GAAG,EAAE,SAAS,CAAC;QACf,IAAI,EAAE,SAAS,CAAC;KACjB,KAAK,IAAI,CAAC;IACX,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,WAAW,~~6GA8KvB~~,CAAC"}
1	+ {"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,qBAAqB,CAAC;AAG7B,OAAO,EACL,KAAK,QAAQ,EAEb,KAAK,SAAS,EAKd,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAC;AAS1B,KAAK,gBAAgB,GAAG;IACtB,iJAAiJ;IACjJ,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxC,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CAAC;IAChD,8GAA8G;IAC9G,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mKAAmK;IACnK,QAAQ,EAAE,CAAC,QAAQ,EAAE;QACnB,GAAG,EAAE,QAAQ,CAAC;QACd,GAAG,EAAE,SAAS,CAAC;QACf,IAAI,EAAE,SAAS,CAAC;KACjB,KAAK,IAAI,CAAC;IACX,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,WAAW,6GAoLvB,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [