@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -1,267 +1,430 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Input } from '../Input/Input.js';
 import { ColorValue, SvgSwap, Box, useId } from '../../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-/**
- * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
- * It also allows switching between the specified formats using a swap button.
- * @example
- * <ColorPicker>
- *   // ...
- *   <ColorInputPanel defaultColorFormat='hsl' />
- * </ColorPicker>
- */
 export const ColorInputPanel = React.forwardRef((props, ref) => {
-    const { defaultColorFormat, allowedColorFormats = ['hsl', 'rgb', 'hex'], className, ...rest } = props;
-    const inputsContainerRef = React.useRef(null);
-    const { activeColor, applyHsvColorChange, hsvColor, showAlpha } = useColorPickerContext();
-    const [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
-    React.useEffect(() => {
-        setCurrentFormat(defaultColorFormat);
-    }, [defaultColorFormat]);
-    // need to use state since input may have parsing error
-    const [input, setInput] = React.useState(['', '', '', '']);
-    React.useEffect(() => {
-        if (currentFormat === 'hsl') {
-            const hsl = activeColor.toHslColor();
-            setInput([
-                ColorValue.getFormattedColorNumber(hsvColor.h),
-                ColorValue.getFormattedColorNumber(hsl.s),
-                ColorValue.getFormattedColorNumber(hsl.l),
-                ColorValue.getFormattedColorNumber(hsl.a ?? activeColor.getAlpha() / 255, 2),
-            ]);
+  const {
+    defaultColorFormat,
+    allowedColorFormats = ['hsl', 'rgb', 'hex'],
+    className,
+    ...rest
+  } = props;
+  const inputsContainerRef = React.useRef(null);
+  const { activeColor, applyHsvColorChange, hsvColor, showAlpha } =
+    useColorPickerContext();
+  const [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
+  React.useEffect(() => {
+    setCurrentFormat(defaultColorFormat);
+  }, [defaultColorFormat]);
+  const [input, setInput] = React.useState(['', '', '', '']);
+  React.useEffect(() => {
+    if (currentFormat === 'hsl') {
+      const hsl = activeColor.toHslColor();
+      setInput([
+        ColorValue.getFormattedColorNumber(hsvColor.h),
+        ColorValue.getFormattedColorNumber(hsl.s),
+        ColorValue.getFormattedColorNumber(hsl.l),
+        ColorValue.getFormattedColorNumber(
+          hsl.a ?? activeColor.getAlpha() / 255,
+          2,
+        ),
+      ]);
+    } else if (currentFormat === 'rgb') {
+      const rgb = activeColor.toRgbColor();
+      setInput([
+        rgb.r.toString(),
+        rgb.g.toString(),
+        rgb.b.toString(),
+        ColorValue.getFormattedColorNumber(
+          rgb.a ?? activeColor.getAlpha() / 255,
+          2,
+        ),
+      ]);
+    } else {
+      setInput([activeColor.toHexString(showAlpha)]);
+      setValidHexInput(true);
+    }
+  }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
+  const [validHexInput, setValidHexInput] = React.useState(true);
+  const swapColorFormat = React.useCallback(() => {
+    const newFormat =
+      allowedColorFormats[
+        (allowedColorFormats.indexOf(currentFormat) + 1) %
+          allowedColorFormats.length
+      ] ?? allowedColorFormats[0];
+    setCurrentFormat(newFormat);
+  }, [currentFormat, allowedColorFormats]);
+  const isFocusInside = (focused) =>
+    !!(
+      focused &&
+      inputsContainerRef.current &&
+      inputsContainerRef.current.contains(focused)
+    );
+  const handleColorInputChange = () => {
+    let color;
+    if (currentFormat === 'hex') {
+      try {
+        const value = input[0].replace(/ /g, '').toLowerCase();
+        color = ColorValue.create(value);
+        setValidHexInput(true);
+        if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
+          return;
         }
-        else if (currentFormat === 'rgb') {
-            const rgb = activeColor.toRgbColor();
-            setInput([
-                rgb.r.toString(),
-                rgb.g.toString(),
-                rgb.b.toString(),
-                ColorValue.getFormattedColorNumber(rgb.a ?? activeColor.getAlpha() / 255, 2),
-            ]);
+      } catch (_e) {
+        setValidHexInput(false);
+        return;
+      }
+    }
+    if (currentFormat === 'hsl') {
+      const [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;
+      }
+      const hsl = activeColor.toHslColor();
+      if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
+        return;
+      }
+      color = ColorValue.create({
+        h,
+        s,
+        l,
+        a,
+      });
+    }
+    if (currentFormat === 'rgb') {
+      const [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;
+      }
+      const rgb = activeColor.toRgbColor();
+      if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
+        return;
+      }
+      color = ColorValue.create({
+        r,
+        g,
+        b,
+        a,
+      });
+    }
+    if (color) {
+      applyHsvColorChange(color.toHsvColor(), true, color);
+    }
+  };
+  const hexInputField = React.createElement(Input, {
+    size: 'small',
+    maxLength: showAlpha ? 9 : 7,
+    minLength: 1,
+    placeholder: 'HEX',
+    'aria-label': 'Hex',
+    value: input[0],
+    onChange: (event) => {
+      const value = event.target.value.startsWith('#')
+        ? event.target.value
+        : `#${event.target.value}`;
+      setInput([value]);
+    },
+    onKeyDown: (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        handleColorInputChange();
+      }
+    },
+    onBlur: (event) => {
+      event.preventDefault();
+      handleColorInputChange();
+    },
+    status: validHexInput ? undefined : 'negative',
+  });
+  const hslInputs = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(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 (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
         }
-        else {
-            setInput([activeColor.toHexString(showAlpha)]);
-            setValidHexInput(true);
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
         }
-    }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
-    const [validHexInput, setValidHexInput] = React.useState(true);
-    const swapColorFormat = React.useCallback(() => {
-        const newFormat = allowedColorFormats[(allowedColorFormats.indexOf(currentFormat) + 1) %
-            allowedColorFormats.length] ?? allowedColorFormats[0];
-        setCurrentFormat(newFormat);
-    }, [currentFormat, allowedColorFormats]);
-    const isFocusInside = (focused) => !!(focused &&
-        inputsContainerRef.current &&
-        inputsContainerRef.current.contains(focused));
-    const handleColorInputChange = () => {
-        let color;
-        if (currentFormat === 'hex') {
-            try {
-                const value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
-                color = ColorValue.create(value);
-                setValidHexInput(true);
-                if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
-                    return;
-                }
-            }
-            catch (_e) {
-                setValidHexInput(false);
-                return;
-            }
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
+    }),
+    React.createElement(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 (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
         }
-        if (currentFormat === 'hsl') {
-            const [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;
-            }
-            const hsl = activeColor.toHslColor();
-            if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
-                return;
-            }
-            color = ColorValue.create({ h, s, l, a });
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
         }
-        if (currentFormat === 'rgb') {
-            const [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;
-            }
-            const rgb = activeColor.toRgbColor();
-            if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
-                return;
-            }
-            color = ColorValue.create({ r, g, b, a });
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
+    }),
+    React.createElement(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 (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
         }
-        if (color) {
-            applyHsvColorChange(color.toHsvColor(), true, color);
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
         }
-    };
-    const hexInputField = (React.createElement(Input, { size: 'small', maxLength: showAlpha ? 9 : 7, minLength: 1, placeholder: 'HEX', "aria-label": 'Hex', value: input[0], onChange: (event) => {
-            const value = event.target.value.startsWith('#')
-                ? event.target.value
-                : `#${event.target.value}`;
-            setInput([value]);
-        }, onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                handleColorInputChange();
-            }
-        }, onBlur: (event) => {
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
+    }),
+    showAlpha &&
+      React.createElement(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 (event.key === 'Enter') {
             event.preventDefault();
             handleColorInputChange();
-        }, status: validHexInput ? undefined : 'negative' }));
-    const hslInputs = (React.createElement(React.Fragment, null,
-        React.createElement(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 (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                if (!isFocusInside(event.relatedTarget)) {
-                    handleColorInputChange();
-                }
-            }, status: Number(input[0]) < 0 || Number(input[0]) > 360
-                ? 'negative'
-                : undefined }),
-        React.createElement(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 (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                if (!isFocusInside(event.relatedTarget)) {
-                    handleColorInputChange();
-                }
-            }, status: Number(input[1]) < 0 || Number(input[1]) > 100
-                ? 'negative'
-                : undefined }),
-        React.createElement(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 (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                if (!isFocusInside(event.relatedTarget)) {
-                    handleColorInputChange();
-                }
-            }, status: Number(input[2]) < 0 || Number(input[2]) > 100
-                ? 'negative'
-                : undefined }),
-        showAlpha && (React.createElement(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 (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                if (!isFocusInside(event.relatedTarget)) {
-                    handleColorInputChange();
-                }
-            }, status: Number(input[3]) < 0 || Number(input[3]) > 1
-                ? 'negative'
-                : undefined }))));
-    const rgbInputs = (React.createElement(React.Fragment, null,
-        React.createElement(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 (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                if (!isFocusInside(event.relatedTarget)) {
-                    handleColorInputChange();
-                }
-            }, status: Number(input[0]) < 0 || Number(input[0]) > 255
-                ? 'negative'
-                : undefined }),
-        React.createElement(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 (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                if (!isFocusInside(event.relatedTarget)) {
-                    handleColorInputChange();
-                }
-            }, status: Number(input[1]) < 0 || Number(input[1]) > 255
-                ? 'negative'
-                : undefined }),
-        React.createElement(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 (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                if (!isFocusInside(event.relatedTarget)) {
-                    handleColorInputChange();
-                }
-            }, status: Number(input[2]) < 0 || Number(input[2]) > 255
-                ? 'negative'
-                : undefined }),
-        showAlpha && (React.createElement(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 (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                if (!isFocusInside(event.relatedTarget)) {
-                    handleColorInputChange();
-                }
-            }, status: Number(input[3]) < 0 || Number(input[3]) > 1
-                ? 'negative'
-                : undefined }))));
-    const labelId = useId();
-    return (React.createElement(Box, { className: cx('iui-color-input-wrapper', className), ref: ref, ...rest },
-        React.createElement(Box, { className: 'iui-color-picker-section-label', id: labelId }, showAlpha && currentFormat !== 'hex'
-            ? currentFormat.toUpperCase() + 'A'
-            : currentFormat.toUpperCase()),
-        React.createElement(Box, { className: 'iui-color-input' },
-            allowedColorFormats.length > 1 && (React.createElement(IconButton, { styleType: 'borderless', onClick: swapColorFormat, size: 'small', label: 'Switch format' },
-                React.createElement(SvgSwap, null))),
-            React.createElement(Box, { ref: inputsContainerRef, className: 'iui-color-input-fields', role: currentFormat !== 'hex' ? 'group' : undefined, "aria-labelledby": currentFormat !== 'hex' ? labelId : undefined },
-                currentFormat === 'hex' && hexInputField,
-                currentFormat === 'rgb' && rgbInputs,
-                currentFormat === 'hsl' && hslInputs))));
+          }
+        },
+        onBlur: (event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
+      }),
+  );
+  const rgbInputs = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(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 (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
+    }),
+    React.createElement(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 (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
+    }),
+    React.createElement(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 (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
+    }),
+    showAlpha &&
+      React.createElement(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 (event.key === 'Enter') {
+            event.preventDefault();
+            handleColorInputChange();
+          }
+        },
+        onBlur: (event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
+      }),
+  );
+  const labelId = useId();
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-color-input-wrapper', className),
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: 'iui-color-picker-section-label',
+        id: labelId,
+      },
+      showAlpha && currentFormat !== 'hex'
+        ? currentFormat.toUpperCase() + 'A'
+        : currentFormat.toUpperCase(),
+    ),
+    React.createElement(
+      Box,
+      {
+        className: 'iui-color-input',
+      },
+      allowedColorFormats.length > 1 &&
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            onClick: swapColorFormat,
+            size: 'small',
+            label: 'Switch format',
+          },
+          React.createElement(SvgSwap, null),
+        ),
+      React.createElement(
+        Box,
+        {
+          ref: inputsContainerRef,
+          className: 'iui-color-input-fields',
+          role: currentFormat !== 'hex' ? 'group' : undefined,
+          'aria-labelledby': currentFormat !== 'hex' ? labelId : undefined,
+        },
+        currentFormat === 'hex' && hexInputField,
+        currentFormat === 'rgb' && rgbInputs,
+        currentFormat === 'hsl' && hslInputs,
+      ),
+    ),
+  );
 });