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

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

@@ -1,115 +1,115 @@
-/*---------------------------------------------------------------------------------------------
-* 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 classnames from "classnames";
-import { ColorByName, ColorDef } from "@itwin/core-common";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { Icon, Popup, useRefs } from "@itwin/core-react";
-// import { ColorPickerPanel } from "./ColorPickerPanel";
-import { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from "@itwin/itwinui-react";
-import "./ColorPickerPopup.scss";
-import { getCSSColorFromDef } from "./getCSSColorFromDef";
-import { UiIModelComponents } from "../UiIModelComponents";
-import { SvgCaretDownSmall, SvgCaretUpSmall, SvgClose } from "@itwin/itwinui-icons-react";
-// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted
-const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPickerPopup(props, ref) {
-    const target = React.useRef(null);
-    const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
-    const [showPopup, setShowPopup] = React.useState(false);
-    const [colorDef, setColorDef] = React.useState(props.initialColor);
-    const initialColorRef = React.useRef(props.initialColor);
-    React.useEffect(() => {
-        if (props.initialColor !== initialColorRef.current) {
-            initialColorRef.current = props.initialColor;
-            setColorDef(props.initialColor);
-        }
-    }, [props.initialColor]);
-    const defaultColors = React.useRef([
-        ColorValue.fromTbgr(ColorByName.red),
-        ColorValue.fromTbgr(ColorByName.orange),
-        ColorValue.fromTbgr(ColorByName.yellow),
-        ColorValue.fromTbgr(ColorByName.green),
-        ColorValue.fromTbgr(ColorByName.blue),
-        ColorValue.fromTbgr(ColorByName.mediumBlue),
-        ColorValue.fromTbgr(ColorByName.indigo),
-        ColorValue.fromTbgr(ColorByName.violet),
-        ColorValue.fromTbgr(ColorByName.black),
-        ColorValue.fromTbgr(ColorByName.white),
-        ColorValue.fromTbgr(ColorByName.cyan),
-        ColorValue.fromTbgr(ColorByName.fuchsia),
-        ColorValue.fromTbgr(ColorByName.tan),
-        ColorValue.fromTbgr(ColorByName.gray),
-        ColorValue.fromTbgr(ColorByName.brown),
-        ColorValue.fromTbgr(ColorByName.purple),
-        ColorValue.fromTbgr(ColorByName.olive),
-        ColorValue.fromTbgr(ColorByName.darkGreen),
-    ]);
-    // istanbul ignore next
-    const closePopup = React.useCallback(() => {
-        props.onClose && props.onClose(colorDef);
-        setShowPopup(false);
-    }, [colorDef, props]);
-    const togglePopup = React.useCallback(() => {
-        setShowPopup(!showPopup);
-    }, [showPopup]);
-    const handleColorChanged = React.useCallback((newColorValue) => {
-        const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());
-        // istanbul ignore else
-        if (!newColor.equals(colorDef)) {
-            setColorDef(newColor);
-            // istanbul ignore else
-            props.onColorChange && props.onColorChange(newColor);
-        }
-    }, [colorDef, props]);
-    const rgbaString = getCSSColorFromDef(colorDef);
-    const buttonStyle = { ...props.style };
-    const swatchStyle = { backgroundColor: rgbaString };
-    const buttonClassNames = classnames("components-colorpicker-popup-button", props.readonly && "readonly", props.className);
-    const clickHandler = (event) => {
-        // istanbul ignore else
-        if (props.captureClicks)
-            event.stopPropagation();
-    };
-    const colorOptions = React.useMemo(() => {
-        if (props.colorDefs && props.colorDefs.length) {
-            return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));
-        }
-        if (props.colorDefs && 0 === props.colorDefs.length)
-            return undefined;
-        return defaultColors.current;
-    }, [props.colorDefs]);
-    const popupPosition = undefined !== props.popupPosition ? props.popupPosition : RelativePosition.BottomLeft;
-    const [closeLabel] = React.useState(() => UiIModelComponents.translate("color.close"));
-    const [togglePopupLabel] = React.useState(() => UiIModelComponents.translate("color.toggleColorPopup"));
-    return (
-    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-    React.createElement("div", { onClick: clickHandler },
-        React.createElement("button", { "data-testid": "components-colorpicker-popup-button", onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: props.disabled, ref: refs, title: togglePopupLabel },
-            React.createElement("div", { className: "components-colorpicker-button-container" },
-                React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle, "data-testid": showPopup ? "caret-up" : "caret-down" }),
-                props.showCaret && React.createElement(Icon, { className: "components-caret", iconSpec: showPopup ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null) }))),
-        React.createElement(Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: popupPosition, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
-            React.createElement("div", { className: "components-colorpicker-popup-panel-padding" },
-                !props.hideCloseButton &&
-                    React.createElement("button", { title: closeLabel, className: "core-focus-trap-ignore-initial core-dialog-close icon", "data-testid": "core-dialog-close", onClick: togglePopup },
-                        React.createElement(Icon, { iconSpec: React.createElement(SvgClose, null) })),
-                React.createElement(ColorPicker, { selectedColor: ColorValue.fromTbgr(colorDef.tbgr), onChangeComplete: handleColorChanged },
-                    React.createElement(ColorBuilder, null),
-                    props.colorInputType &&
-                        React.createElement(ColorInputPanel, { defaultColorFormat: props.colorInputType }),
-                    colorOptions &&
-                        React.createElement(ColorPalette, { colors: colorOptions }))))));
-});
-/**
- * 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 const ColorPickerPopup = ForwardRefColorPickerPopup;
+/*---------------------------------------------------------------------------------------------
+* 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 classnames from "classnames";
+import { ColorByName, ColorDef } from "@itwin/core-common";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { Icon, Popup, useRefs } from "@itwin/core-react";
+// import { ColorPickerPanel } from "./ColorPickerPanel";
+import { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from "@itwin/itwinui-react";
+import "./ColorPickerPopup.scss";
+import { getCSSColorFromDef } from "./getCSSColorFromDef";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { SvgCaretDownSmall, SvgCaretUpSmall, SvgClose } from "@itwin/itwinui-icons-react";
+// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted
+const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPickerPopup(props, ref) {
+    const target = React.useRef(null);
+    const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+    const [showPopup, setShowPopup] = React.useState(false);
+    const [colorDef, setColorDef] = React.useState(props.initialColor);
+    const initialColorRef = React.useRef(props.initialColor);
+    React.useEffect(() => {
+        if (props.initialColor !== initialColorRef.current) {
+            initialColorRef.current = props.initialColor;
+            setColorDef(props.initialColor);
+        }
+    }, [props.initialColor]);
+    const defaultColors = React.useRef([
+        ColorValue.fromTbgr(ColorByName.red),
+        ColorValue.fromTbgr(ColorByName.orange),
+        ColorValue.fromTbgr(ColorByName.yellow),
+        ColorValue.fromTbgr(ColorByName.green),
+        ColorValue.fromTbgr(ColorByName.blue),
+        ColorValue.fromTbgr(ColorByName.mediumBlue),
+        ColorValue.fromTbgr(ColorByName.indigo),
+        ColorValue.fromTbgr(ColorByName.violet),
+        ColorValue.fromTbgr(ColorByName.black),
+        ColorValue.fromTbgr(ColorByName.white),
+        ColorValue.fromTbgr(ColorByName.cyan),
+        ColorValue.fromTbgr(ColorByName.fuchsia),
+        ColorValue.fromTbgr(ColorByName.tan),
+        ColorValue.fromTbgr(ColorByName.gray),
+        ColorValue.fromTbgr(ColorByName.brown),
+        ColorValue.fromTbgr(ColorByName.purple),
+        ColorValue.fromTbgr(ColorByName.olive),
+        ColorValue.fromTbgr(ColorByName.darkGreen),
+    ]);
+    // istanbul ignore next
+    const closePopup = React.useCallback(() => {
+        props.onClose && props.onClose(colorDef);
+        setShowPopup(false);
+    }, [colorDef, props]);
+    const togglePopup = React.useCallback(() => {
+        setShowPopup(!showPopup);
+    }, [showPopup]);
+    const handleColorChanged = React.useCallback((newColorValue) => {
+        const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());
+        // istanbul ignore else
+        if (!newColor.equals(colorDef)) {
+            setColorDef(newColor);
+            // istanbul ignore else
+            props.onColorChange && props.onColorChange(newColor);
+        }
+    }, [colorDef, props]);
+    const rgbaString = getCSSColorFromDef(colorDef);
+    const buttonStyle = { ...props.style };
+    const swatchStyle = { backgroundColor: rgbaString };
+    const buttonClassNames = classnames("components-colorpicker-popup-button", props.readonly && "readonly", props.className);
+    const clickHandler = (event) => {
+        // istanbul ignore else
+        if (props.captureClicks)
+            event.stopPropagation();
+    };
+    const colorOptions = React.useMemo(() => {
+        if (props.colorDefs && props.colorDefs.length) {
+            return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));
+        }
+        if (props.colorDefs && 0 === props.colorDefs.length)
+            return undefined;
+        return defaultColors.current;
+    }, [props.colorDefs]);
+    const popupPosition = undefined !== props.popupPosition ? props.popupPosition : RelativePosition.BottomLeft;
+    const [closeLabel] = React.useState(() => UiIModelComponents.translate("color.close"));
+    const [togglePopupLabel] = React.useState(() => UiIModelComponents.translate("color.toggleColorPopup"));
+    return (
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+    React.createElement("div", { onClick: clickHandler },
+        React.createElement("button", { "data-testid": "components-colorpicker-popup-button", onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: props.disabled, ref: refs, title: togglePopupLabel },
+            React.createElement("div", { className: "components-colorpicker-button-container" },
+                React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle, "data-testid": showPopup ? "caret-up" : "caret-down" }),
+                props.showCaret && React.createElement(Icon, { className: "components-caret", iconSpec: showPopup ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null) }))),
+        React.createElement(Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: popupPosition, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
+            React.createElement("div", { className: "components-colorpicker-popup-panel-padding" },
+                !props.hideCloseButton &&
+                    React.createElement("button", { title: closeLabel, className: "core-focus-trap-ignore-initial core-dialog-close icon", "data-testid": "core-dialog-close", onClick: togglePopup },
+                        React.createElement(Icon, { iconSpec: React.createElement(SvgClose, null) })),
+                React.createElement(ColorPicker, { selectedColor: ColorValue.fromTbgr(colorDef.tbgr), onChangeComplete: handleColorChanged },
+                    React.createElement(ColorBuilder, null),
+                    props.colorInputType &&
+                        React.createElement(ColorInputPanel, { defaultColorFormat: props.colorInputType }),
+                    colorOptions &&
+                        React.createElement(ColorPalette, { colors: colorOptions }))))));
+});
+/**
+ * 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 const ColorPickerPopup = ForwardRefColorPickerPopup;
 //# sourceMappingURL=ColorPickerPopup.js.map

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

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module Color
- */
-import "./HueSlider.scss";
-import * as React from "react";
-import { HSVColor } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[HueSlider]] React component
- * @beta
- */
-export interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {
-    /** true if slider is oriented horizontal, else vertical orientation is assumed */
-    isHorizontal?: boolean;
-    /** function to run when user hue is changed */
-    onHueChange?: ((hue: HSVColor) => void) | undefined;
-    /** HSV Color Value */
-    hsv: HSVColor;
-}
-/** HueSlider component used to set the hue value.
- * @beta
- */
-export declare function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps): JSX.Element;
+/** @packageDocumentation
+ * @module Color
+ */
+import "./HueSlider.scss";
+import * as React from "react";
+import { HSVColor } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[HueSlider]] React component
+ * @beta
+ */
+export interface HueSliderProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {
+    /** true if slider is oriented horizontal, else vertical orientation is assumed */
+    isHorizontal?: boolean;
+    /** function to run when user hue is changed */
+    onHueChange?: ((hue: HSVColor) => void) | undefined;
+    /** HSV Color Value */
+    hsv: HSVColor;
+}
+/** HueSlider component used to set the hue value.
+ * @beta
+ */
+export declare function HueSlider({ isHorizontal, onHueChange, hsv, className, style }: HueSliderProps): JSX.Element;
 //# sourceMappingURL=HueSlider.d.ts.map

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

@@ -1,174 +1,174 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./HueSlider.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { UiIModelComponents } from "../UiIModelComponents";
-// hue is a value from 0 to 360
-function calculateHue(currentPos, high, isVertical) {
-    // istanbul ignore next
-    if (currentPos <= 0) {
-        return isVertical ? 359 : 0;
-    }
-    else if (currentPos >= high) {
-        return isVertical ? 0 : 359;
-    }
-    else {
-        let percent = ((currentPos * 100) / high);
-        if (isVertical)
-            percent = 100 - percent;
-        return Math.round(((359 * percent) / 100));
-    }
-}
-function calculateChange(currentHue, e, isHorizontal, container) {
-    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
-    let x;
-    if ("pageX" in e) {
-        x = e.pageX;
-    }
-    else {
-        // istanbul ignore if
-        if (undefined === e.touches || 0 === e.touches.length)
-            return currentHue;
-        x = e.touches[0].pageX;
-    }
-    // istanbul ignore if
-    if (undefined === x)
-        return currentHue;
-    let y;
-    if ("pageY" in e) {
-        y = e.pageY;
-    }
-    else {
-        // istanbul ignore if
-        if (undefined === e.touches || 0 === e.touches.length)
-            return currentHue;
-        y = e.touches[0].pageY;
-    }
-    // istanbul ignore if
-    if (undefined === y)
-        return currentHue;
-    const pointerX = x - (containerLeft + window.scrollX);
-    const pointerY = y - (containerTop + window.scrollY);
-    if (!isHorizontal) { // vertical
-        return calculateHue(pointerY, containerHeight, true);
-    }
-    else { // horizontal
-        return calculateHue(pointerX, containerWidth, false);
-    }
-}
-/** HueSlider component used to set the hue value.
- * @beta
- */
-export function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
-    const container = React.useRef(null);
-    const [hueLabel] = React.useState(() => UiIModelComponents.translate("color.hue"));
-    const isDragging = React.useRef(false);
-    const onChange = React.useCallback((e) => {
-        // istanbul ignore else
-        if (container.current) {
-            const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);
-            // istanbul ignore else
-            const newColor = hsv.clone(newHue);
-            // istanbul ignore else
-            if (onHueChange)
-                onHueChange(newColor);
-        }
-    }, [isHorizontal, hsv, onHueChange]);
-    const onDragging = React.useCallback((e) => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            onChange(e);
-        }
-    }, [onChange]);
-    const onMouseUp = React.useCallback(() => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            isDragging.current = false;
-        }
-    }, []);
-    const onTouchEnd = React.useCallback((event) => {
-        event.preventDefault();
-        // istanbul ignore else
-        if (isDragging.current) {
-            onChange(event);
-            isDragging.current = false;
-        }
-    }, [onChange]);
-    const onMouseDown = React.useCallback((e) => {
-        e.preventDefault();
-        // istanbul ignore else
-        if (e.target !== e.currentTarget) {
-            // istanbul ignore else
-            if (!isDragging.current) {
-                document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
-                isDragging.current = true;
-            }
-        }
-        onChange(e);
-        // istanbul ignore else
-        if (container.current)
-            container.current.focus();
-    }, [onChange, onMouseUp]);
-    const onTouchStart = React.useCallback((e) => {
-        // istanbul ignore else
-        if (e.target !== e.currentTarget)
-            isDragging.current = true;
-        onChange(e);
-        // istanbul ignore else
-        if (container.current)
-            container.current.focus();
-    }, [onChange]);
-    const onKeyDown = React.useCallback((evt) => {
-        let newHue;
-        const hueValue = hsv.h;
-        if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {
-            newHue = hueValue - (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {
-            newHue = hueValue + (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === SpecialKey.PageDown) {
-            newHue = hueValue - (evt.ctrlKey ? 180 : 60);
-        }
-        else if (evt.key === SpecialKey.PageUp) {
-            newHue = hueValue + (evt.ctrlKey ? 180 : 60);
-        }
-        else if (evt.key === SpecialKey.Home) {
-            newHue = 0;
-        }
-        else {
-            // istanbul ignore else
-            if (evt.key === SpecialKey.End) {
-                newHue = 359;
-            }
-        }
-        // istanbul ignore else
-        if (undefined !== newHue) {
-            // istanbul ignore if
-            if (newHue > 359)
-                newHue = 359; // 360 is same as zero
-            // istanbul ignore if
-            if (newHue < 0)
-                newHue = 0;
-            const newColor = hsv.clone(newHue);
-            // istanbul ignore else
-            if (onHueChange)
-                onHueChange(newColor);
-            evt.preventDefault();
-        }
-    }, [hsv, onHueChange]);
-    const containerClasses = classnames(isHorizontal ? "components-hue-container-horizontal" : "components-hue-container-vertical", className);
-    const pointerStyle = isHorizontal ? { left: `${(hsv.h * 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :
-        { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };
-    return (React.createElement("div", { className: containerClasses, style: style, "data-testid": "hue-container" },
-        React.createElement("div", { "data-testid": "hue-slider", role: "slider", "aria-label": hueLabel, "aria-valuemin": 0, "aria-valuemax": 360, "aria-valuenow": hsv.h, className: "components-hue-slider", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onMouseUp: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
-            React.createElement("div", { style: pointerStyle, className: "components-hue-pointer", "data-testid": "hue-pointer" }))));
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./HueSlider.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { UiIModelComponents } from "../UiIModelComponents";
+// hue is a value from 0 to 360
+function calculateHue(currentPos, high, isVertical) {
+    // istanbul ignore next
+    if (currentPos <= 0) {
+        return isVertical ? 359 : 0;
+    }
+    else if (currentPos >= high) {
+        return isVertical ? 0 : 359;
+    }
+    else {
+        let percent = ((currentPos * 100) / high);
+        if (isVertical)
+            percent = 100 - percent;
+        return Math.round(((359 * percent) / 100));
+    }
+}
+function calculateChange(currentHue, e, isHorizontal, container) {
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
+    let x;
+    if ("pageX" in e) {
+        x = e.pageX;
+    }
+    else {
+        // istanbul ignore if
+        if (undefined === e.touches || 0 === e.touches.length)
+            return currentHue;
+        x = e.touches[0].pageX;
+    }
+    // istanbul ignore if
+    if (undefined === x)
+        return currentHue;
+    let y;
+    if ("pageY" in e) {
+        y = e.pageY;
+    }
+    else {
+        // istanbul ignore if
+        if (undefined === e.touches || 0 === e.touches.length)
+            return currentHue;
+        y = e.touches[0].pageY;
+    }
+    // istanbul ignore if
+    if (undefined === y)
+        return currentHue;
+    const pointerX = x - (containerLeft + window.scrollX);
+    const pointerY = y - (containerTop + window.scrollY);
+    if (!isHorizontal) { // vertical
+        return calculateHue(pointerY, containerHeight, true);
+    }
+    else { // horizontal
+        return calculateHue(pointerX, containerWidth, false);
+    }
+}
+/** HueSlider component used to set the hue value.
+ * @beta
+ */
+export function HueSlider({ isHorizontal, onHueChange, hsv, className, style }) {
+    const container = React.useRef(null);
+    const [hueLabel] = React.useState(() => UiIModelComponents.translate("color.hue"));
+    const isDragging = React.useRef(false);
+    const onChange = React.useCallback((e) => {
+        // istanbul ignore else
+        if (container.current) {
+            const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);
+            // istanbul ignore else
+            const newColor = hsv.clone(newHue);
+            // istanbul ignore else
+            if (onHueChange)
+                onHueChange(newColor);
+        }
+    }, [isHorizontal, hsv, onHueChange]);
+    const onDragging = React.useCallback((e) => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(e);
+        }
+    }, [onChange]);
+    const onMouseUp = React.useCallback(() => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            isDragging.current = false;
+        }
+    }, []);
+    const onTouchEnd = React.useCallback((event) => {
+        event.preventDefault();
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(event);
+            isDragging.current = false;
+        }
+    }, [onChange]);
+    const onMouseDown = React.useCallback((e) => {
+        e.preventDefault();
+        // istanbul ignore else
+        if (e.target !== e.currentTarget) {
+            // istanbul ignore else
+            if (!isDragging.current) {
+                document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+                isDragging.current = true;
+            }
+        }
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+    }, [onChange, onMouseUp]);
+    const onTouchStart = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.target !== e.currentTarget)
+            isDragging.current = true;
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+    }, [onChange]);
+    const onKeyDown = React.useCallback((evt) => {
+        let newHue;
+        const hueValue = hsv.h;
+        if (evt.key === SpecialKey.ArrowLeft || evt.key === SpecialKey.ArrowDown) {
+            newHue = hueValue - (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.ArrowRight || evt.key === SpecialKey.ArrowUp) {
+            newHue = hueValue + (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.PageDown) {
+            newHue = hueValue - (evt.ctrlKey ? 180 : 60);
+        }
+        else if (evt.key === SpecialKey.PageUp) {
+            newHue = hueValue + (evt.ctrlKey ? 180 : 60);
+        }
+        else if (evt.key === SpecialKey.Home) {
+            newHue = 0;
+        }
+        else {
+            // istanbul ignore else
+            if (evt.key === SpecialKey.End) {
+                newHue = 359;
+            }
+        }
+        // istanbul ignore else
+        if (undefined !== newHue) {
+            // istanbul ignore if
+            if (newHue > 359)
+                newHue = 359; // 360 is same as zero
+            // istanbul ignore if
+            if (newHue < 0)
+                newHue = 0;
+            const newColor = hsv.clone(newHue);
+            // istanbul ignore else
+            if (onHueChange)
+                onHueChange(newColor);
+            evt.preventDefault();
+        }
+    }, [hsv, onHueChange]);
+    const containerClasses = classnames(isHorizontal ? "components-hue-container-horizontal" : "components-hue-container-vertical", className);
+    const pointerStyle = isHorizontal ? { left: `${(hsv.h * 100) / 360}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` } :
+        { left: `0px`, top: `${-((hsv.h * 100) / 360) + 100}%`, backgroundColor: `hsl(${hsv.h} ,100%, 50%)` };
+    return (React.createElement("div", { className: containerClasses, style: style, "data-testid": "hue-container" },
+        React.createElement("div", { "data-testid": "hue-slider", role: "slider", "aria-label": hueLabel, "aria-valuemin": 0, "aria-valuemax": 360, "aria-valuenow": hsv.h, className: "components-hue-slider", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onMouseUp: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
+            React.createElement("div", { style: pointerStyle, className: "components-hue-pointer", "data-testid": "hue-pointer" }))));
+}
 //# sourceMappingURL=HueSlider.js.map