@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-cjs/core/ColorPicker/ColorBuilder.js

@@ -1,250 +1,296 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "ColorBuilder", {
-    enumerable: true,
-    get: function() {
-        return ColorBuilder;
-    }
+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 _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)=>{
-    let position = (0, _index.getBoundedValue)(pointer, rect.top, rect.bottom);
-    return (position - rect.top) / rect.height * 100;
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+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) => {
+  let position = (0, _index.getBoundedValue)(pointer, rect.top, rect.bottom);
+  return ((position - rect.top) / rect.height) * 100;
 };
-const getHorizontalPercentageOfRectangle = (rect, pointer)=>{
-    let position = (0, _index.getBoundedValue)(pointer, rect.left, rect.right);
-    return (position - rect.left) / rect.width * 100;
+const getHorizontalPercentageOfRectangle = (rect, pointer) => {
+  let position = (0, _index.getBoundedValue)(pointer, rect.left, rect.right);
+  return ((position - rect.left) / rect.width) * 100;
 };
-const ColorBuilder = _react.forwardRef((props, ref)=>{
-    let { className, ...rest } = props;
-    let builderRef = _react.useRef();
-    let refs = (0, _index.useMergedRefs)(builderRef, ref);
-    let { activeColor, hsvColor, onChangeComplete, applyHsvColorChange, showAlpha } = (0, _ColorPickerContext.useColorPickerContext)();
-    let hueSliderColor = _react.useMemo(()=>_index.ColorValue.create({
-            h: hsvColor.h,
-            s: 100,
-            v: 100
-        }), [
-        hsvColor.h
-    ]);
-    let sliderValue = _react.useMemo(()=>hsvColor.h, [
-        hsvColor
-    ]);
-    let alphaValue = _react.useMemo(()=>showAlpha ? hsvColor.a ?? 1 : 1, [
-        hsvColor.a,
-        showAlpha
-    ]);
-    let dotColorString = _react.useMemo(()=>activeColor.toHexString(), [
-        activeColor
-    ]);
-    let [colorDotActive, setColorDotActive] = _react.useState(false);
-    let hueColorString = hueSliderColor.toHexString();
-    let squareTop = 100 - hsvColor.v;
-    let squareLeft = hsvColor.s;
-    let updateHueSlider = _react.useCallback((huePercent, selectionChanged)=>{
-        let hue = Number(huePercent.toFixed(2));
-        let newHsvColor = {
-            h: hue,
-            s: hsvColor.s,
-            v: hsvColor.v,
-            a: hsvColor.a
-        };
-        applyHsvColorChange(newHsvColor, selectionChanged);
-    }, [
-        applyHsvColorChange,
-        hsvColor
-    ]);
-    let updateOpacitySlider = _react.useCallback((alphaPercent, selectionChanged)=>{
-        let alpha = Number(alphaPercent.toFixed(2));
-        let newHsvColor = {
-            h: hsvColor.h,
-            s: hsvColor.s,
-            v: hsvColor.v,
-            a: alpha
-        };
-        applyHsvColorChange(newHsvColor, selectionChanged);
-    }, [
-        applyHsvColorChange,
-        hsvColor
-    ]);
-    let squareRef = _react.useRef(null);
-    let colorDotRef = _react.useRef(null);
-    let updateColorDot = _react.useCallback((x, y, selectionChanged)=>{
-        let newHsvColor = {
-            h: hsvColor.h,
-            s: x,
-            v: 100 - y,
-            a: hsvColor.a
-        };
-        applyHsvColorChange(newHsvColor, selectionChanged);
-    }, [
-        applyHsvColorChange,
-        hsvColor
-    ]);
-    let updateSquareValue = _react.useCallback((event, callbackType)=>{
-        if (squareRef.current && colorDotActive || squareRef.current && 'onClick' === callbackType) {
-            let percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
-            let percentY = getVerticalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientY);
-            'onChange' === callbackType ? updateColorDot(percentX, percentY, true) : updateColorDot(percentX, percentY, false);
-        }
-    }, [
-        colorDotActive,
-        updateColorDot
-    ]);
-    let 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);
-    let handleSquarePointerMove = _react.useCallback((event)=>{
-        if (!colorDotActive) return;
-        event.preventDefault();
-        event.stopPropagation();
-        updateSquareValue(event, 'onUpdate');
-    }, [
-        colorDotActive,
-        updateSquareValue
-    ]);
-    (0, _index.useEventListener)('pointermove', handleSquarePointerMove, builderRef.current?.ownerDocument);
-    let handleSquarePointerLeave = _react.useCallback((event)=>{
-        if (!colorDotActive) return;
-        updateSquareValue(event, 'onChange');
-        setColorDotActive(false);
-    }, [
-        colorDotActive,
-        updateSquareValue
-    ]);
-    (0, _index.useEventListener)('pointerleave', handleSquarePointerLeave, builderRef.current?.ownerDocument);
-    let keysPressed = _react.useRef({});
-    let 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;
-        }
-    };
-    let 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.ColorValue.create(hsvColor));
-                break;
-        }
-    };
-    return _react.createElement(_index.Box, {
-        className: (0, _classnames.default)('iui-color-selection-wrapper', className),
-        ref: refs,
-        ...rest
-    }, _react.createElement(_index.Box, {
-        className: "iui-color-field",
+const ColorBuilder = _react.forwardRef((props, ref) => {
+  let { className, ...rest } = props;
+  let builderRef = _react.useRef();
+  let refs = (0, _index.useMergedRefs)(builderRef, ref);
+  let {
+    activeColor,
+    hsvColor,
+    onChangeComplete,
+    applyHsvColorChange,
+    showAlpha,
+  } = (0, _ColorPickerContext.useColorPickerContext)();
+  let hueSliderColor = _react.useMemo(
+    () =>
+      _index.ColorValue.create({
+        h: hsvColor.h,
+        s: 100,
+        v: 100,
+      }),
+    [hsvColor.h],
+  );
+  let sliderValue = _react.useMemo(() => hsvColor.h, [hsvColor]);
+  let alphaValue = _react.useMemo(
+    () => (showAlpha ? hsvColor.a ?? 1 : 1),
+    [hsvColor.a, showAlpha],
+  );
+  let dotColorString = _react.useMemo(
+    () => activeColor.toHexString(),
+    [activeColor],
+  );
+  let [colorDotActive, setColorDotActive] = _react.useState(false);
+  let hueColorString = hueSliderColor.toHexString();
+  let squareTop = 100 - hsvColor.v;
+  let squareLeft = hsvColor.s;
+  let updateHueSlider = _react.useCallback(
+    (huePercent, selectionChanged) => {
+      let hue = Number(huePercent.toFixed(2));
+      let newHsvColor = {
+        h: hue,
+        s: hsvColor.s,
+        v: hsvColor.v,
+        a: hsvColor.a,
+      };
+      applyHsvColorChange(newHsvColor, selectionChanged);
+    },
+    [applyHsvColorChange, hsvColor],
+  );
+  let updateOpacitySlider = _react.useCallback(
+    (alphaPercent, selectionChanged) => {
+      let alpha = Number(alphaPercent.toFixed(2));
+      let newHsvColor = {
+        h: hsvColor.h,
+        s: hsvColor.s,
+        v: hsvColor.v,
+        a: alpha,
+      };
+      applyHsvColorChange(newHsvColor, selectionChanged);
+    },
+    [applyHsvColorChange, hsvColor],
+  );
+  let squareRef = _react.useRef(null);
+  let colorDotRef = _react.useRef(null);
+  let updateColorDot = _react.useCallback(
+    (x, y, selectionChanged) => {
+      let newHsvColor = {
+        h: hsvColor.h,
+        s: x,
+        v: 100 - y,
+        a: hsvColor.a,
+      };
+      applyHsvColorChange(newHsvColor, selectionChanged);
+    },
+    [applyHsvColorChange, hsvColor],
+  );
+  let updateSquareValue = _react.useCallback(
+    (event, callbackType) => {
+      if (
+        (squareRef.current && colorDotActive) ||
+        (squareRef.current && 'onClick' === callbackType)
+      ) {
+        let percentX = getHorizontalPercentageOfRectangle(
+          squareRef.current.getBoundingClientRect(),
+          event.clientX,
+        );
+        let percentY = getVerticalPercentageOfRectangle(
+          squareRef.current.getBoundingClientRect(),
+          event.clientY,
+        );
+        'onChange' === callbackType
+          ? updateColorDot(percentX, percentY, true)
+          : updateColorDot(percentX, percentY, false);
+      }
+    },
+    [colorDotActive, updateColorDot],
+  );
+  let 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,
+  );
+  let handleSquarePointerMove = _react.useCallback(
+    (event) => {
+      if (!colorDotActive) return;
+      event.preventDefault();
+      event.stopPropagation();
+      updateSquareValue(event, 'onUpdate');
+    },
+    [colorDotActive, updateSquareValue],
+  );
+  (0, _index.useEventListener)(
+    'pointermove',
+    handleSquarePointerMove,
+    builderRef.current?.ownerDocument,
+  );
+  let handleSquarePointerLeave = _react.useCallback(
+    (event) => {
+      if (!colorDotActive) return;
+      updateSquareValue(event, 'onChange');
+      setColorDotActive(false);
+    },
+    [colorDotActive, updateSquareValue],
+  );
+  (0, _index.useEventListener)(
+    'pointerleave',
+    handleSquarePointerLeave,
+    builderRef.current?.ownerDocument,
+  );
+  let keysPressed = _react.useRef({});
+  let 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;
+    }
+  };
+  let 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.ColorValue.create(hsvColor));
+        break;
+    }
+  };
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-color-selection-wrapper',
+        className,
+      ),
+      ref: refs,
+      ...rest,
+    },
+    _react.createElement(
+      _index.Box,
+      {
+        className: 'iui-color-field',
         style: {
-            '--iui-color-field-hue': hueColorString,
-            '--iui-color-picker-selected-color': dotColorString
+          '--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.Box, {
-        className: "iui-color-dot",
+        onPointerDown: (event) => {
+          event.preventDefault();
+          updateSquareValue(event, 'onClick');
+          setColorDotActive(true);
+          colorDotRef.current?.focus();
+        },
+      },
+      _react.createElement(_index.Box, {
+        className: 'iui-color-dot',
         style: {
-            '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
-            '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`
+          '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
+          '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
         },
-        onPointerDown: ()=>{
-            setColorDotActive(true);
-            colorDotRef.current?.focus();
+        onPointerDown: () => {
+          setColorDotActive(true);
+          colorDotRef.current?.focus();
         },
         onKeyDown: handleColorDotKeyDown,
         onKeyUp: handleColorDotKeyUp,
         tabIndex: 0,
-        ref: colorDotRef
-    })), _react.createElement(_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 && _react.createElement(_Slider.Slider, {
-        minLabel: "",
-        maxLabel: "",
-        values: [
-            alphaValue
-        ],
-        className: "iui-opacity-slider",
-        trackDisplayMode: "none",
-        tooltipProps: ()=>({
-                visible: false
-            }),
-        onChange: (values)=>{
-            updateOpacitySlider(values[0], true);
+        ref: colorDotRef,
+      }),
+    ),
+    _react.createElement(_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 &&
+      _react.createElement(_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);
+        onUpdate: (values) => {
+          updateOpacitySlider(values[0], false);
         },
         min: 0,
         max: 1,
         step: 0.01,
         style: {
-            '--iui-color-picker-selected-color': hueColorString
+          '--iui-color-picker-selected-color': hueColorString,
         },
-        thumbProps: ()=>({
-                'aria-label': 'Opacity'
-            })
-    }));
+        thumbProps: () => ({
+          'aria-label': 'Opacity',
+        }),
+      }),
+  );
 });
 ColorBuilder.displayName = 'ColorBuilder';