@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -1,49 +1,31 @@
-"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;
-});
-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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ColorBuilder = void 0;
+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 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../Slider/index.js");
-require("@itwin/itwinui-css/css/color-picker.css");
-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 index_js_2 = require('../Slider/index.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:
@@ -51,170 +33,276 @@ const getHorizontalPercentageOfRectangle = (rect, pointer) => {
  * and a set of sliders to adjust hue and alpha values.
  */
 exports.ColorBuilder = React.forwardRef((props, ref) => {
-    var _a, _b, _c;
-    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(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _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, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    const handleSquarePointerMove = React.useCallback((event) => {
-        if (!colorDotActive) {
-            return;
+  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);
         }
-        event.preventDefault();
-        event.stopPropagation();
-        updateSquareValue(event, 'onUpdate');
-    }, [colorDotActive, updateSquareValue]);
-    (0, index_js_1.useEventListener)('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    const handleSquarePointerLeave = React.useCallback((event) => {
-        if (!colorDotActive) {
-            return;
-        }
-        updateSquareValue(event, 'onChange');
-        setColorDotActive(false);
-    }, [colorDotActive, updateSquareValue]);
-    (0, index_js_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.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 === null || onChangeComplete === void 0 ? void 0 : 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_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;
         }
-    };
-    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) => {
-                var _a;
-                event.preventDefault();
-                updateSquareValue(event, 'onClick');
-                setColorDotActive(true);
-                (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            } },
-            React.createElement(index_js_1.Box, { className: 'iui-color-dot', style: {
-                    '--iui-color-dot-inset': `${squareTop.toString()}% auto auto ${squareLeft.toString()}%`,
-                }, onPointerDown: () => {
-                    var _a;
-                    setColorDotActive(true);
-                    (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, onKeyDown: handleColorDotKeyDown, onKeyUp: handleColorDotKeyUp, tabIndex: 0, ref: colorDotRef })),
-        React.createElement(index_js_2.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 }),
-        showAlpha && (React.createElement(index_js_2.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,
-            } }))));
+        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(index_js_2.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,
+    }),
+    showAlpha &&
+      React.createElement(index_js_2.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,
+        },
+      }),
+  );
 });

package/cjs/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,6 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
-declare type ColorInputPanelProps = {
+type ColorInputPanelProps = {
     /**
      * The default color format to be inputted in the panel.
      */