@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -1,217 +1,305 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorBuilder = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_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");
+Object.defineProperty(exports, 'ColorBuilder', {
+  enumerable: true,
+  get: function () {
+    return ColorBuilder;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _Slider = require('../Slider/Slider.js');
+const _ColorPickerContext = 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.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.getBoundedValue)(pointer, rect.left, rect.right);
+  return ((position - rect.left) / rect.width) * 100;
 };
-/**
- * `ColorBuilder` consists of two parts:
- * a color canvas to adjust saturation and lightness values,
- * 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);
-            }
-        }
-    }, [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;
+const ColorBuilder = _react.forwardRef((props, ref) => {
+  const { className, ...rest } = props;
+  const builderRef = _react.useRef();
+  const refs = (0, _index.useMergedRefs)(builderRef, ref);
+  const {
+    activeColor,
+    hsvColor,
+    onChangeComplete,
+    applyHsvColorChange,
+    showAlpha,
+  } = (0, _ColorPickerContext.useColorPickerContext)();
+  const hueSliderColor = _react.useMemo(
+    () =>
+      _index.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],
+  );
+  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;
+  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],
+  );
+  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],
+  );
+  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);
         }
-        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;
+      }
+    },
+    [colorDotActive, updateColorDot],
+  );
+  const handleSquarePointerUp = _react.useCallback(
+    (event) => {
+      if (!colorDotActive) {
+        return;
+      }
+      updateSquareValue(event, 'onChange');
+      setColorDotActive(false);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [colorDotActive, updateSquareValue],
+  );
+  (0, _index.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.useEventListener)(
+    'pointermove',
+    handleSquarePointerMove,
+    builderRef.current?.ownerDocument,
+  );
+  const handleSquarePointerLeave = _react.useCallback(
+    (event) => {
+      if (!colorDotActive) {
+        return;
+      }
+      updateSquareValue(event, 'onChange');
+      setColorDotActive(false);
+    },
+    [colorDotActive, updateSquareValue],
+  );
+  (0, _index.useEventListener)(
+    'pointerleave',
+    handleSquarePointerLeave,
+    builderRef.current?.ownerDocument,
+  );
+  const keysPressed = _react.useRef({});
+  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;
         }
-    };
-    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' }) }))));
+        onChangeComplete?.(_index.ColorValue.create(hsvColor));
+        break;
+    }
+  };
+  return (0, _jsxruntime.jsxs)(_index.Box, {
+    className: (0, _classnames.default)(
+      'iui-color-selection-wrapper',
+      className,
+    ),
+    ref: refs,
+    ...rest,
+    children: [
+      (0, _jsxruntime.jsx)(_index.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();
+        },
+        children: (0, _jsxruntime.jsx)(_index.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,
+        }),
+      }),
+      (0, _jsxruntime.jsx)(_Slider.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 &&
+        (0, _jsxruntime.jsx)(_Slider.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',
+          }),
+        }),
+    ],
+  });
 });