@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+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 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",
+        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.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.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);
+        },
+        min: 0,
+        max: 1,
+        step: 0.01,
+        style: {
+            '--iui-color-picker-selected-color': hueColorString
+        },
+        thumbProps: ()=>({
+                'aria-label': 'Opacity'
+            })
+    }));
+});
+ColorBuilder.displayName = 'ColorBuilder';

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

@@ -0,0 +1,384 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ColorInputPanel", {
+    enumerable: true,
+    get: function() {
+        return ColorInputPanel;
+    }
+});
+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 _IconButton = require("../Buttons/IconButton.js");
+const _Input = require("../Input/Input.js");
+const _index = require("../../utils/index.js");
+const _ColorPickerContext = require("./ColorPickerContext.js");
+const ColorInputPanel = _react.forwardRef((props, ref)=>{
+    let { defaultColorFormat, allowedColorFormats = [
+        'hsl',
+        'rgb',
+        'hex'
+    ], className, ...rest } = props;
+    let inputsContainerRef = _react.useRef(null);
+    let { activeColor, applyHsvColorChange, hsvColor, showAlpha } = (0, _ColorPickerContext.useColorPickerContext)();
+    let [currentFormat, setCurrentFormat] = _react.useState(defaultColorFormat);
+    _react.useEffect(()=>{
+        setCurrentFormat(defaultColorFormat);
+    }, [
+        defaultColorFormat
+    ]);
+    let [input, setInput] = _react.useState([
+        '',
+        '',
+        '',
+        ''
+    ]);
+    _react.useEffect(()=>{
+        if ('hsl' === currentFormat) {
+            let hsl = activeColor.toHslColor();
+            setInput([
+                _index.ColorValue.getFormattedColorNumber(hsvColor.h),
+                _index.ColorValue.getFormattedColorNumber(hsl.s),
+                _index.ColorValue.getFormattedColorNumber(hsl.l),
+                _index.ColorValue.getFormattedColorNumber(hsl.a ?? activeColor.getAlpha() / 255, 2)
+            ]);
+        } else if ('rgb' === currentFormat) {
+            let rgb = activeColor.toRgbColor();
+            setInput([
+                rgb.r.toString(),
+                rgb.g.toString(),
+                rgb.b.toString(),
+                _index.ColorValue.getFormattedColorNumber(rgb.a ?? activeColor.getAlpha() / 255, 2)
+            ]);
+        } else {
+            setInput([
+                activeColor.toHexString(showAlpha)
+            ]);
+            setValidHexInput(true);
+        }
+    }, [
+        activeColor,
+        hsvColor.h,
+        currentFormat,
+        showAlpha
+    ]);
+    let [validHexInput, setValidHexInput] = _react.useState(true);
+    let swapColorFormat = _react.useCallback(()=>{
+        let newFormat = allowedColorFormats[(allowedColorFormats.indexOf(currentFormat) + 1) % allowedColorFormats.length] ?? allowedColorFormats[0];
+        setCurrentFormat(newFormat);
+    }, [
+        currentFormat,
+        allowedColorFormats
+    ]);
+    let isFocusInside = (focused)=>!!(focused && inputsContainerRef.current && inputsContainerRef.current.contains(focused));
+    let handleColorInputChange = ()=>{
+        let color;
+        if ('hex' === currentFormat) try {
+            let value = input[0].replace(/ /g, '').toLowerCase();
+            color = _index.ColorValue.create(value);
+            setValidHexInput(true);
+            if (activeColor.toHexString(showAlpha).toLowerCase() === value) return;
+        } catch (_e) {
+            setValidHexInput(false);
+            return;
+        }
+        if ('hsl' === currentFormat) {
+            let [h, s, l, a] = input.map(Number);
+            if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100 || a < 0 || a > 1) return;
+            let hsl = activeColor.toHslColor();
+            if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) return;
+            color = _index.ColorValue.create({
+                h,
+                s,
+                l,
+                a
+            });
+        }
+        if ('rgb' === currentFormat) {
+            let [r, g, b, a] = input.map(Number);
+            if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 || a < 0 || a > 1) return;
+            let rgb = activeColor.toRgbColor();
+            if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) return;
+            color = _index.ColorValue.create({
+                r,
+                g,
+                b,
+                a
+            });
+        }
+        if (color) applyHsvColorChange(color.toHsvColor(), true, color);
+    };
+    let hexInputField = _react.createElement(_Input.Input, {
+        size: "small",
+        maxLength: showAlpha ? 9 : 7,
+        minLength: 1,
+        placeholder: "HEX",
+        "aria-label": "Hex",
+        value: input[0],
+        onChange: (event)=>{
+            let value = event.target.value.startsWith('#') ? event.target.value : `#${event.target.value}`;
+            setInput([
+                value
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            handleColorInputChange();
+        },
+        status: validHexInput ? void 0 : 'negative'
+    });
+    let hslInputs = _react.createElement(_react.Fragment, null, _react.createElement(_Input.Input, {
+        size: "small",
+        type: "number",
+        min: "0",
+        max: "359",
+        step: ".1",
+        placeholder: "H",
+        "aria-label": "Hue",
+        value: input[0] ?? '',
+        onChange: (event)=>{
+            setInput([
+                event.target.value,
+                input[1],
+                input[2],
+                input[3]
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        },
+        status: Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : void 0
+    }), _react.createElement(_Input.Input, {
+        size: "small",
+        type: "number",
+        min: "0",
+        max: "100",
+        step: ".1",
+        placeholder: "S",
+        "aria-label": "Saturation",
+        value: input[1] ?? '',
+        onChange: (event)=>{
+            setInput([
+                input[0],
+                event.target.value,
+                input[2],
+                input[3]
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        },
+        status: Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : void 0
+    }), _react.createElement(_Input.Input, {
+        size: "small",
+        type: "number",
+        min: "0",
+        max: "100",
+        step: ".1",
+        placeholder: "L",
+        "aria-label": "Lightness",
+        value: input[2] ?? '',
+        onChange: (event)=>{
+            setInput([
+                input[0],
+                input[1],
+                event.target.value,
+                input[3]
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        },
+        status: Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : void 0
+    }), showAlpha && _react.createElement(_Input.Input, {
+        size: "small",
+        type: "number",
+        min: "0",
+        max: "1",
+        step: ".01",
+        placeholder: "A",
+        "aria-label": "Alpha",
+        value: input[3] ?? '',
+        onChange: (event)=>{
+            setInput([
+                input[0],
+                input[1],
+                input[2],
+                event.target.value
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        },
+        status: Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0
+    }));
+    let rgbInputs = _react.createElement(_react.Fragment, null, _react.createElement(_Input.Input, {
+        size: "small",
+        type: "number",
+        min: "0",
+        max: "255",
+        placeholder: "R",
+        "aria-label": "Red",
+        value: input[0] ?? '',
+        onChange: (event)=>{
+            setInput([
+                event.target.value,
+                input[1],
+                input[2],
+                input[3]
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        },
+        status: Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : void 0
+    }), _react.createElement(_Input.Input, {
+        size: "small",
+        type: "number",
+        min: "0",
+        max: "255",
+        placeholder: "G",
+        "aria-label": "Green",
+        value: input[1] ?? '',
+        onChange: (event)=>{
+            setInput([
+                input[0],
+                event.target.value,
+                input[2],
+                input[3]
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        },
+        status: Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : void 0
+    }), _react.createElement(_Input.Input, {
+        size: "small",
+        type: "number",
+        min: "0",
+        max: "255",
+        placeholder: 'B',
+        "aria-label": "Blue",
+        value: input[2] ?? '',
+        onChange: (event)=>{
+            setInput([
+                input[0],
+                input[1],
+                event.target.value,
+                input[3]
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        },
+        status: Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : void 0
+    }), showAlpha && _react.createElement(_Input.Input, {
+        size: "small",
+        type: "number",
+        min: "0",
+        max: "1",
+        step: ".01",
+        placeholder: "A",
+        "aria-label": "Alpha",
+        value: input[3] ?? '',
+        onChange: (event)=>{
+            setInput([
+                input[0],
+                input[1],
+                input[2],
+                event.target.value
+            ]);
+        },
+        onKeyDown: (event)=>{
+            if ('Enter' === event.key) {
+                event.preventDefault();
+                handleColorInputChange();
+            }
+        },
+        onBlur: (event)=>{
+            event.preventDefault();
+            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        },
+        status: Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0
+    }));
+    let labelId = (0, _index.useId)();
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-color-input-wrapper', className),
+        ref: ref,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        className: "iui-color-picker-section-label",
+        id: labelId
+    }, showAlpha && 'hex' !== currentFormat ? currentFormat.toUpperCase() + 'A' : currentFormat.toUpperCase()), _react.createElement(_index.Box, {
+        className: "iui-color-input"
+    }, allowedColorFormats.length > 1 && _react.createElement(_IconButton.IconButton, {
+        styleType: "borderless",
+        onClick: swapColorFormat,
+        size: "small",
+        label: "Switch format"
+    }, _react.createElement(_index.SvgSwap, null)), _react.createElement(_index.Box, {
+        ref: inputsContainerRef,
+        className: "iui-color-input-fields",
+        role: 'hex' !== currentFormat ? 'group' : void 0,
+        "aria-labelledby": 'hex' !== currentFormat ? labelId : void 0
+    }, 'hex' === currentFormat && hexInputField, 'rgb' === currentFormat && rgbInputs, 'hsl' === currentFormat && hslInputs)));
+});
+ColorInputPanel.displayName = 'ColorInputPanel';

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ColorPalette", {
+    enumerable: true,
+    get: function() {
+        return ColorPalette;
+    }
+});
+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 _ColorPicker = require("./ColorPicker.js");
+const _ColorSwatch = require("./ColorSwatch.js");
+const _ColorPickerContext = require("./ColorPickerContext.js");
+const ColorPalette = _react.forwardRef((props, ref)=>{
+    let { colors, label, className, children, ...rest } = props;
+    let { activeColor, setActiveColor, onChangeComplete } = (0, _ColorPickerContext.useColorPickerContext)();
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-color-palette-wrapper', className),
+        ref: ref,
+        ...rest
+    }, label && _react.createElement(_index.Box, {
+        className: "iui-color-picker-section-label"
+    }, label), _react.createElement(_index.Box, {
+        className: "iui-color-palette"
+    }, children, colors && colors.map((_color, index)=>{
+        let color = (0, _ColorPicker.getColorValue)(_color);
+        return _react.createElement(_ColorSwatch.ColorSwatch, {
+            key: index,
+            color: color,
+            onClick: ()=>{
+                onChangeComplete?.(color);
+                setActiveColor(color);
+            },
+            isActive: color.equals(activeColor)
+        });
+    })));
+});
+ColorPalette.displayName = 'ColorPalette';