@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -1,31 +1,23 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorBuilder = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const Slider_js_1 = require('../Slider/Slider.js');
-const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const Slider_js_1 = require("../Slider/Slider.js");
+const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
-  const position = (0, index_js_1.getBoundedValue)(
-    pointer,
-    rect.top,
-    rect.bottom,
-  );
-  return ((position - rect.top) / rect.height) * 100;
+    const position = (0, index_js_1.getBoundedValue)(pointer, rect.top, rect.bottom);
+    return ((position - rect.top) / rect.height) * 100;
 };
 const getHorizontalPercentageOfRectangle = (rect, pointer) => {
-  const position = (0, index_js_1.getBoundedValue)(
-    pointer,
-    rect.left,
-    rect.right,
-  );
-  return ((position - rect.left) / rect.width) * 100;
+    const position = (0, index_js_1.getBoundedValue)(pointer, rect.left, rect.right);
+    return ((position - rect.left) / rect.width) * 100;
 };
 /**
  * `ColorBuilder` consists of two parts:
@@ -33,278 +25,168 @@ const getHorizontalPercentageOfRectangle = (rect, pointer) => {
  * and a set of sliders to adjust hue and alpha values.
  */
 exports.ColorBuilder = React.forwardRef((props, ref) => {
-  const { className, ...rest } = props;
-  const builderRef = React.useRef();
-  const refs = (0, index_js_1.useMergedRefs)(builderRef, ref);
-  const {
-    activeColor,
-    hsvColor,
-    onChangeComplete,
-    applyHsvColorChange,
-    showAlpha,
-  } = (0, ColorPickerContext_js_1.useColorPickerContext)();
-  // Set values for slider
-  const hueSliderColor = React.useMemo(
-    () => index_js_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }),
-    [hsvColor.h],
-  );
-  const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
-  const alphaValue = React.useMemo(
-    () => (showAlpha ? hsvColor.a ?? 1 : 1),
-    [hsvColor.a, showAlpha],
-  );
-  // Set values for color square and color dot
-  const dotColorString = React.useMemo(
-    () => activeColor.toHexString(),
-    [activeColor],
-  );
-  const [colorDotActive, setColorDotActive] = React.useState(false);
-  const hueColorString = hueSliderColor.toHexString();
-  const squareTop = 100 - hsvColor.v;
-  const squareLeft = hsvColor.s;
-  // Update slider change
-  const updateHueSlider = React.useCallback(
-    (huePercent, selectionChanged) => {
-      const hue = Number(huePercent.toFixed(2));
-      const newHsvColor = {
-        h: hue,
-        s: hsvColor.s,
-        v: hsvColor.v,
-        a: hsvColor.a,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  // Update opacity slider change
-  const updateOpacitySlider = React.useCallback(
-    (alphaPercent, selectionChanged) => {
-      const alpha = Number(alphaPercent.toFixed(2));
-      const newHsvColor = {
-        h: hsvColor.h,
-        s: hsvColor.s,
-        v: hsvColor.v,
-        a: alpha,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  // Update Color field square change
-  const squareRef = React.useRef(null);
-  const colorDotRef = React.useRef(null);
-  const updateColorDot = React.useCallback(
-    (x, y, selectionChanged) => {
-      const newHsvColor = {
-        h: hsvColor.h,
-        s: x,
-        v: 100 - y,
-        a: hsvColor.a,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  const updateSquareValue = React.useCallback(
-    (event, callbackType) => {
-      if (
-        (squareRef.current && colorDotActive) ||
-        (squareRef.current && callbackType === 'onClick')
-      ) {
-        const percentX = getHorizontalPercentageOfRectangle(
-          squareRef.current.getBoundingClientRect(),
-          event.clientX,
-        );
-        const percentY = getVerticalPercentageOfRectangle(
-          squareRef.current.getBoundingClientRect(),
-          event.clientY,
-        );
-        if (callbackType === 'onChange') {
-          updateColorDot(percentX, percentY, true);
-        } else {
-          updateColorDot(percentX, percentY, false);
+    const { className, ...rest } = props;
+    const builderRef = React.useRef();
+    const refs = (0, index_js_1.useMergedRefs)(builderRef, ref);
+    const { activeColor, hsvColor, onChangeComplete, applyHsvColorChange, showAlpha, } = (0, ColorPickerContext_js_1.useColorPickerContext)();
+    // Set values for slider
+    const hueSliderColor = React.useMemo(() => index_js_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
+    const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
+    const alphaValue = React.useMemo(() => (showAlpha ? hsvColor.a ?? 1 : 1), [hsvColor.a, showAlpha]);
+    // Set values for color square and color dot
+    const dotColorString = React.useMemo(() => activeColor.toHexString(), [activeColor]);
+    const [colorDotActive, setColorDotActive] = React.useState(false);
+    const hueColorString = hueSliderColor.toHexString();
+    const squareTop = 100 - hsvColor.v;
+    const squareLeft = hsvColor.s;
+    // Update slider change
+    const updateHueSlider = React.useCallback((huePercent, selectionChanged) => {
+        const hue = Number(huePercent.toFixed(2));
+        const newHsvColor = {
+            h: hue,
+            s: hsvColor.s,
+            v: hsvColor.v,
+            a: hsvColor.a,
+        };
+        applyHsvColorChange(newHsvColor, selectionChanged);
+    }, [applyHsvColorChange, hsvColor]);
+    // Update opacity slider change
+    const updateOpacitySlider = React.useCallback((alphaPercent, selectionChanged) => {
+        const alpha = Number(alphaPercent.toFixed(2));
+        const newHsvColor = {
+            h: hsvColor.h,
+            s: hsvColor.s,
+            v: hsvColor.v,
+            a: alpha,
+        };
+        applyHsvColorChange(newHsvColor, selectionChanged);
+    }, [applyHsvColorChange, hsvColor]);
+    // Update Color field square change
+    const squareRef = React.useRef(null);
+    const colorDotRef = React.useRef(null);
+    const updateColorDot = React.useCallback((x, y, selectionChanged) => {
+        const newHsvColor = {
+            h: hsvColor.h,
+            s: x,
+            v: 100 - y,
+            a: hsvColor.a,
+        };
+        applyHsvColorChange(newHsvColor, selectionChanged);
+    }, [applyHsvColorChange, hsvColor]);
+    const updateSquareValue = React.useCallback((event, callbackType) => {
+        if ((squareRef.current && colorDotActive) ||
+            (squareRef.current && callbackType === 'onClick')) {
+            const percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
+            const percentY = getVerticalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientY);
+            if (callbackType === 'onChange') {
+                updateColorDot(percentX, percentY, true);
+            }
+            else {
+                updateColorDot(percentX, percentY, false);
+            }
         }
-      }
-    },
-    [colorDotActive, updateColorDot],
-  );
-  const handleSquarePointerUp = React.useCallback(
-    (event) => {
-      if (!colorDotActive) {
-        return;
-      }
-      updateSquareValue(event, 'onChange');
-      setColorDotActive(false);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  (0, index_js_1.useEventListener)(
-    'pointerup',
-    handleSquarePointerUp,
-    builderRef.current?.ownerDocument,
-  );
-  const handleSquarePointerMove = React.useCallback(
-    (event) => {
-      if (!colorDotActive) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      updateSquareValue(event, 'onUpdate');
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  (0, index_js_1.useEventListener)(
-    'pointermove',
-    handleSquarePointerMove,
-    builderRef.current?.ownerDocument,
-  );
-  const handleSquarePointerLeave = React.useCallback(
-    (event) => {
-      if (!colorDotActive) {
-        return;
-      }
-      updateSquareValue(event, 'onChange');
-      setColorDotActive(false);
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  (0, index_js_1.useEventListener)(
-    'pointerleave',
-    handleSquarePointerLeave,
-    builderRef.current?.ownerDocument,
-  );
-  const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
-  // Arrow key navigation for color dot
-  const handleColorDotKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    let x = squareLeft;
-    let y = squareTop;
-    keysPressed.current[event.key] = true;
-    switch (event.key) {
-      case 'ArrowDown': {
-        y = Math.min(y + 1, 100);
-        updateColorDot(x, y, false);
-        break;
-      }
-      case 'ArrowUp': {
-        y = Math.max(y - 1, 0);
-        updateColorDot(x, y, false);
-        break;
-      }
-      case 'ArrowLeft':
-        x = Math.max(x - 1, 0);
-        updateColorDot(x, y, false);
-        break;
-      case 'ArrowRight':
-        x = Math.min(x + 1, 100);
-        updateColorDot(x, y, false);
-        break;
-    }
-  };
-  const handleColorDotKeyUp = (event) => {
-    keysPressed.current[event.key] = false;
-    switch (event.key) {
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        if (
-          keysPressed.current['ArrowUp'] ||
-          keysPressed.current['ArrowDown'] ||
-          keysPressed.current['ArrowLeft'] ||
-          keysPressed.current['ArrowRight']
-        ) {
-          return;
+    }, [colorDotActive, updateColorDot]);
+    const handleSquarePointerUp = React.useCallback((event) => {
+        if (!colorDotActive) {
+            return;
         }
-        onChangeComplete?.(index_js_1.ColorValue.create(hsvColor));
-        break;
-    }
-  };
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-color-selection-wrapper',
-        className,
-      ),
-      ref: refs,
-      ...rest,
-    },
-    React.createElement(
-      index_js_1.Box,
-      {
-        className: 'iui-color-field',
-        style: {
-          '--iui-color-field-hue': hueColorString,
-          '--iui-color-picker-selected-color': dotColorString,
-        },
-        ref: squareRef,
-        onPointerDown: (event) => {
-          event.preventDefault();
-          updateSquareValue(event, 'onClick');
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        },
-      },
-      React.createElement(index_js_1.Box, {
-        className: 'iui-color-dot',
-        style: {
-          '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
-          '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
-        },
-        onPointerDown: () => {
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        },
-        onKeyDown: handleColorDotKeyDown,
-        onKeyUp: handleColorDotKeyUp,
-        tabIndex: 0,
-        ref: colorDotRef,
-      }),
-    ),
-    React.createElement(Slider_js_1.Slider, {
-      minLabel: '',
-      maxLabel: '',
-      values: [sliderValue],
-      className: 'iui-hue-slider',
-      trackDisplayMode: 'none',
-      tooltipProps: () => ({ visible: false }),
-      onChange: (values) => {
-        updateHueSlider(values[0], true);
-      },
-      onUpdate: (values) => {
-        updateHueSlider(values[0], false);
-      },
-      min: 0,
-      max: 359,
-      thumbProps: () => ({ 'aria-label': 'Hue' }),
-    }),
-    showAlpha &&
-      React.createElement(Slider_js_1.Slider, {
-        minLabel: '',
-        maxLabel: '',
-        values: [alphaValue],
-        className: 'iui-opacity-slider',
-        trackDisplayMode: 'none',
-        tooltipProps: () => ({ visible: false }),
-        onChange: (values) => {
-          updateOpacitySlider(values[0], true);
-        },
-        onUpdate: (values) => {
-          updateOpacitySlider(values[0], false);
-        },
-        min: 0,
-        max: 1,
-        step: 0.01,
-        style: {
-          '--iui-color-picker-selected-color': hueColorString,
-        },
-        thumbProps: () => ({ 'aria-label': 'Opacity' }),
-      }),
-  );
+        updateSquareValue(event, 'onChange');
+        setColorDotActive(false);
+        event.preventDefault();
+        event.stopPropagation();
+    }, [colorDotActive, updateSquareValue]);
+    (0, index_js_1.useEventListener)('pointerup', handleSquarePointerUp, builderRef.current?.ownerDocument);
+    const handleSquarePointerMove = React.useCallback((event) => {
+        if (!colorDotActive) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        updateSquareValue(event, 'onUpdate');
+    }, [colorDotActive, updateSquareValue]);
+    (0, index_js_1.useEventListener)('pointermove', handleSquarePointerMove, builderRef.current?.ownerDocument);
+    const handleSquarePointerLeave = React.useCallback((event) => {
+        if (!colorDotActive) {
+            return;
+        }
+        updateSquareValue(event, 'onChange');
+        setColorDotActive(false);
+    }, [colorDotActive, updateSquareValue]);
+    (0, index_js_1.useEventListener)('pointerleave', handleSquarePointerLeave, builderRef.current?.ownerDocument);
+    const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
+    // Arrow key navigation for color dot
+    const handleColorDotKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        let x = squareLeft;
+        let y = squareTop;
+        keysPressed.current[event.key] = true;
+        switch (event.key) {
+            case 'ArrowDown': {
+                y = Math.min(y + 1, 100);
+                updateColorDot(x, y, false);
+                break;
+            }
+            case 'ArrowUp': {
+                y = Math.max(y - 1, 0);
+                updateColorDot(x, y, false);
+                break;
+            }
+            case 'ArrowLeft':
+                x = Math.max(x - 1, 0);
+                updateColorDot(x, y, false);
+                break;
+            case 'ArrowRight':
+                x = Math.min(x + 1, 100);
+                updateColorDot(x, y, false);
+                break;
+        }
+    };
+    const handleColorDotKeyUp = (event) => {
+        keysPressed.current[event.key] = false;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                if (keysPressed.current['ArrowUp'] ||
+                    keysPressed.current['ArrowDown'] ||
+                    keysPressed.current['ArrowLeft'] ||
+                    keysPressed.current['ArrowRight']) {
+                    return;
+                }
+                onChangeComplete?.(index_js_1.ColorValue.create(hsvColor));
+                break;
+        }
+    };
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-color-selection-wrapper', className), ref: refs, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-color-field', style: {
+                '--iui-color-field-hue': hueColorString,
+                '--iui-color-picker-selected-color': dotColorString,
+            }, ref: squareRef, onPointerDown: (event) => {
+                event.preventDefault();
+                updateSquareValue(event, 'onClick');
+                setColorDotActive(true);
+                colorDotRef.current?.focus();
+            } },
+            React.createElement(index_js_1.Box, { className: 'iui-color-dot', style: {
+                    '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
+                    '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
+                }, onPointerDown: () => {
+                    setColorDotActive(true);
+                    colorDotRef.current?.focus();
+                }, onKeyDown: handleColorDotKeyDown, onKeyUp: handleColorDotKeyUp, tabIndex: 0, ref: colorDotRef })),
+        React.createElement(Slider_js_1.Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
+                updateHueSlider(values[0], true);
+            }, onUpdate: (values) => {
+                updateHueSlider(values[0], false);
+            }, min: 0, max: 359, thumbProps: () => ({ 'aria-label': 'Hue' }) }),
+        showAlpha && (React.createElement(Slider_js_1.Slider, { minLabel: '', maxLabel: '', values: [alphaValue], className: 'iui-opacity-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
+                updateOpacitySlider(values[0], true);
+            }, onUpdate: (values) => {
+                updateOpacitySlider(values[0], false);
+            }, min: 0, max: 1, step: 0.01, style: {
+                '--iui-color-picker-selected-color': hueColorString,
+            }, thumbProps: () => ({ 'aria-label': 'Opacity' }) }))));
 });