@itwin/imodel-components-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/imodel-components-react/color/ColorPickerPanel.js

@@ -1,123 +1,123 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-// cSpell:ignore colorpicker
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { ColorSwatch } from "./Swatch";
-import { HueSlider } from "./HueSlider";
-import { SaturationPicker } from "./SaturationPicker";
-import "./ColorPickerPanel.scss";
-import { NumberInput } from "@itwin/core-react";
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react
- */
-// istanbul ignore next
-export function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
-    const handlePresetColorPick = React.useCallback((newColor, e) => {
-        e.preventDefault();
-        if (onColorChange) {
-            onColorChange(newColor);
-        }
-    }, [onColorChange]);
-    const handleHueChange = React.useCallback((newHsvColor) => {
-        // for a ColorDef to be created from hsv s can't be 0
-        if (newHsvColor.s === 0) {
-            newHsvColor = newHsvColor.clone(undefined, 0.5);
-        }
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const handleSaturationChange = React.useCallback((newHsvColor) => {
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);
-    const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);
-    const color = React.useMemo(() => activeColor.colors, [activeColor]);
-    const handleLightnessValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, undefined, (value !== null && value !== void 0 ? value : 0) / 100);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleHueValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone((value !== null && value !== void 0 ? value : 0) / 360, undefined, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleSaturationValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, (value !== null && value !== void 0 ? value : 0) / 100, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleRedChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = ColorDef.from(value, color.g, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleGreenChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = ColorDef.from(color.r, value, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleBlueChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = ColorDef.from(color.r, color.g, value);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    return (React.createElement("div", { "data-testid": "components-colorpicker-panel", className: "components-colorpicker-panel" },
-        React.createElement("div", { className: "components-colorpicker-panel-color" },
-            React.createElement("div", { className: "components-colorpicker-saturation" },
-                React.createElement(SaturationPicker, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
-            React.createElement("div", { className: "components-colorpicker-hue" },
-                React.createElement(HueSlider, { hsv: currentHsv, onHueChange: handleHueChange, isHorizontal: false }))),
-        (colorInputType === "RGB") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "R"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-red", value: color.r, onChange: handleRedChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "G"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-green", value: color.g, onChange: handleGreenChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "B"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-blue", value: color.b, onChange: handleBlueChange, min: 0, max: 255 }))),
-        (colorInputType === "HSL") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "H"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-hue", value: Math.round(currentHsl.h * 360), onChange: handleHueValueChange, min: 0, max: 360 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "S"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-saturation", value: Math.round(currentHsl.s * 100), onChange: handleSaturationValueChange, min: 0, max: 100 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "L"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-lightness", value: Math.round(currentHsl.l * 100), onChange: handleLightnessValueChange, min: 0, max: 100 }))),
-        colorPresets && colorPresets.length &&
-            React.createElement("div", { className: "components-colorpicker-panel-presets" }, colorPresets.map((preset, index) => React.createElement(ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+// cSpell:ignore colorpicker
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { ColorSwatch } from "./Swatch";
+import { HueSlider } from "./HueSlider";
+import { SaturationPicker } from "./SaturationPicker";
+import "./ColorPickerPanel.scss";
+import { NumberInput } from "@itwin/core-react";
+/**
+ * Color Picker Dialog to use as modal dialog.
+ * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react
+ */
+// istanbul ignore next
+export function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
+    const handlePresetColorPick = React.useCallback((newColor, e) => {
+        e.preventDefault();
+        if (onColorChange) {
+            onColorChange(newColor);
+        }
+    }, [onColorChange]);
+    const handleHueChange = React.useCallback((newHsvColor) => {
+        // for a ColorDef to be created from hsv s can't be 0
+        if (newHsvColor.s === 0) {
+            newHsvColor = newHsvColor.clone(undefined, 0.5);
+        }
+        const newColorDef = newHsvColor.toColorDef();
+        if (onColorChange) {
+            onColorChange(newColorDef);
+        }
+    }, [onColorChange]);
+    const handleSaturationChange = React.useCallback((newHsvColor) => {
+        const newColorDef = newHsvColor.toColorDef();
+        if (onColorChange) {
+            onColorChange(newColorDef);
+        }
+    }, [onColorChange]);
+    const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);
+    const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);
+    const color = React.useMemo(() => activeColor.colors, [activeColor]);
+    const handleLightnessValueChange = React.useCallback((value, _stringValue) => {
+        const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);
+        if (onColorChange) {
+            const newColorDef = newHsl.toColorDef();
+            onColorChange(newColorDef);
+        }
+    }, [currentHsl, onColorChange]);
+    const handleHueValueChange = React.useCallback((value, _stringValue) => {
+        const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);
+        if (onColorChange) {
+            const newColorDef = newHsl.toColorDef();
+            onColorChange(newColorDef);
+        }
+    }, [currentHsl, onColorChange]);
+    const handleSaturationValueChange = React.useCallback((value, _stringValue) => {
+        const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);
+        if (onColorChange) {
+            const newColorDef = newHsl.toColorDef();
+            onColorChange(newColorDef);
+        }
+    }, [currentHsl, onColorChange]);
+    const handleRedChange = React.useCallback((value, _stringValue) => {
+        if (undefined !== value) {
+            const newColorDef = ColorDef.from(value, color.g, color.b);
+            if (onColorChange) {
+                onColorChange(newColorDef);
+            }
+        }
+    }, [color, onColorChange]);
+    const handleGreenChange = React.useCallback((value, _stringValue) => {
+        if (undefined !== value) {
+            const newColorDef = ColorDef.from(color.r, value, color.b);
+            if (onColorChange) {
+                onColorChange(newColorDef);
+            }
+        }
+    }, [color, onColorChange]);
+    const handleBlueChange = React.useCallback((value, _stringValue) => {
+        if (undefined !== value) {
+            const newColorDef = ColorDef.from(color.r, color.g, value);
+            if (onColorChange) {
+                onColorChange(newColorDef);
+            }
+        }
+    }, [color, onColorChange]);
+    return (React.createElement("div", { "data-testid": "components-colorpicker-panel", className: "components-colorpicker-panel" },
+        React.createElement("div", { className: "components-colorpicker-panel-color" },
+            React.createElement("div", { className: "components-colorpicker-saturation" },
+                React.createElement(SaturationPicker, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
+            React.createElement("div", { className: "components-colorpicker-hue" },
+                React.createElement(HueSlider, { hsv: currentHsv, onHueChange: handleHueChange, isHorizontal: false }))),
+        (colorInputType === "RGB") &&
+            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "R"),
+                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-red", value: color.r, onChange: handleRedChange, min: 0, max: 255 })),
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "G"),
+                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-green", value: color.g, onChange: handleGreenChange, min: 0, max: 255 })),
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "B"),
+                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-blue", value: color.b, onChange: handleBlueChange, min: 0, max: 255 }))),
+        (colorInputType === "HSL") &&
+            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "H"),
+                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-hue", value: Math.round(currentHsl.h * 360), onChange: handleHueValueChange, min: 0, max: 360 })),
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "S"),
+                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-saturation", value: Math.round(currentHsl.s * 100), onChange: handleSaturationValueChange, min: 0, max: 100 })),
+                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
+                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "L"),
+                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-lightness", value: Math.round(currentHsl.l * 100), onChange: handleLightnessValueChange, min: 0, max: 100 }))),
+        colorPresets && colorPresets.length &&
+            React.createElement("div", { className: "components-colorpicker-panel-presets" }, colorPresets.map((preset, index) => React.createElement(ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
+}
 //# sourceMappingURL=ColorPickerPanel.js.map

package/lib/esm/imodel-components-react/color/ColorPickerPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react\r\n */\r\nexport interface ColorPickerPanelProps {\r\n  activeColor: ColorDef;\r\n  onColorChange: (selectedColor: ColorDef) => void;\r\n  colorPresets?: ColorDef[];\r\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n  colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\r\n  const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n    e.preventDefault();\r\n    if (onColorChange) {\r\n      onColorChange(newColor);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    // for a ColorDef to be created from hsv s can't be 0\r\n    if (newHsvColor.s === 0) {\r\n      newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n    }\r\n\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n  const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n  const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n  const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(value, color.g, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, value, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, color.g, value);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  return (\r\n    <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n      <div className=\"components-colorpicker-panel-color\">\r\n        <div className=\"components-colorpicker-saturation\">\r\n          <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n        </div>\r\n        <div className=\"components-colorpicker-hue\">\r\n          <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n        </div>\r\n      </div>\r\n      {(colorInputType === \"RGB\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">R</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">G</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">B</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n          </div>\r\n        </div>}\r\n      {(colorInputType === \"HSL\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">H</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">S</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">L</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n          </div>\r\n        </div>}\r\n\r\n      {\r\n        colorPresets && colorPresets.length &&\r\n        <div className=\"components-colorpicker-panel-presets\">\r\n          {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n        </div>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react\r\n */\r\nexport interface ColorPickerPanelProps {\r\n  activeColor: ColorDef;\r\n  onColorChange: (selectedColor: ColorDef) => void;\r\n  colorPresets?: ColorDef[];\r\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n  colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public @deprecated in 3.0. Use `ColorPicker` for itwinui-react\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\r\n  const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n    e.preventDefault();\r\n    if (onColorChange) {\r\n      onColorChange(newColor);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    // for a ColorDef to be created from hsv s can't be 0\r\n    if (newHsvColor.s === 0) {\r\n      newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n    }\r\n\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n  const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n  const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n  const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(value, color.g, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, value, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, color.g, value);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  return (\r\n    <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n      <div className=\"components-colorpicker-panel-color\">\r\n        <div className=\"components-colorpicker-saturation\">\r\n          <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n        </div>\r\n        <div className=\"components-colorpicker-hue\">\r\n          <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n        </div>\r\n      </div>\r\n      {(colorInputType === \"RGB\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">R</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">G</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">B</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n          </div>\r\n        </div>}\r\n      {(colorInputType === \"HSL\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">H</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">S</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">L</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n          </div>\r\n        </div>}\r\n\r\n      {\r\n        colorPresets && colorPresets.length &&\r\n        <div className=\"components-colorpicker-panel-presets\">\r\n          {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n        </div>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/esm/imodel-components-react/color/ColorPickerPopup.d.ts

@@ -1,45 +1,45 @@
-/** @packageDocumentation
- * @module Color
- */
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
-import "./ColorPickerPopup.scss";
-/** Properties for the [[ColorPickerPopup]] React component
- * @public
- */
-export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** Current color */
-    initialColor: ColorDef;
-    /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.
-     *  Displayed in rows of 9 items */
-    colorDefs?: ColorDef[];
-    /** Function to call when the color value is changed */
-    onColorChange?: ((newColor: ColorDef) => void) | undefined;
-    /** Function to call when the popup is closed */
-    onClose?: ((colorValue: ColorDef) => void) | undefined;
-    /** Disabled or not */
-    disabled?: boolean;
-    /** Readonly or not, color displayed on button but button will not trigger pop-up */
-    readonly?: boolean;
-    /** popup position. If not set RelativePosition.BottomLeft is used */
-    popupPosition?: RelativePosition;
-    /** Provides ability to return reference to HTMLButtonElement */
-    ref?: React.Ref<HTMLButtonElement>;
-    /** If true show up/down caret next to color  */
-    showCaret?: boolean;
-    /** If true, don't propagate clicks out of the ColorPicker */
-    captureClicks?: boolean;
-    /** If true, don't show close button at top */
-    hideCloseButton?: boolean;
-    /** If set show input values */
-    colorInputType?: "hsl" | "rgb" | "hex";
-}
-/**
- * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.
- * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.
- * @public
- */
-export declare const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null;
+/** @packageDocumentation
+ * @module Color
+ */
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+import "./ColorPickerPopup.scss";
+/** Properties for the [[ColorPickerPopup]] React component
+ * @public
+ */
+export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** Current color */
+    initialColor: ColorDef;
+    /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.
+     *  Displayed in rows of 9 items */
+    colorDefs?: ColorDef[];
+    /** Function to call when the color value is changed */
+    onColorChange?: ((newColor: ColorDef) => void) | undefined;
+    /** Function to call when the popup is closed */
+    onClose?: ((colorValue: ColorDef) => void) | undefined;
+    /** Disabled or not */
+    disabled?: boolean;
+    /** Readonly or not, color displayed on button but button will not trigger pop-up */
+    readonly?: boolean;
+    /** popup position. If not set RelativePosition.BottomLeft is used */
+    popupPosition?: RelativePosition;
+    /** Provides ability to return reference to HTMLButtonElement */
+    ref?: React.Ref<HTMLButtonElement>;
+    /** If true show up/down caret next to color  */
+    showCaret?: boolean;
+    /** If true, don't propagate clicks out of the ColorPicker */
+    captureClicks?: boolean;
+    /** If true, don't show close button at top */
+    hideCloseButton?: boolean;
+    /** If set show input values */
+    colorInputType?: "hsl" | "rgb" | "hex";
+}
+/**
+ * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.
+ * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.
+ * @public
+ */
+export declare const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null;
 //# sourceMappingURL=ColorPickerPopup.d.ts.map