@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -18,409 +18,251 @@ import { useColorPickerContext } from './ColorPickerContext.js';
  * </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,
-        ),
-      ]);
-    } 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(); // remove white space from input
-        color = ColorValue.create(value);
-        setValidHexInput(true);
-        if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
-          return;
+    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),
+            ]);
         }
-      } 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 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),
+            ]);
         }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          handleColorInputChange();
+        else {
+            setInput([activeColor.toHexString(showAlpha)]);
+            setValidHexInput(true);
         }
-      },
-      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();
+    }, [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;
+            }
         }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          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 });
         }
-      },
-      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 (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 });
         }
-      },
-      onBlur: (event) => {
-        event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          handleColorInputChange();
+        if (color) {
+            applyHsvColorChange(color.toHsvColor(), true, color);
         }
-      },
-      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') {
+    };
+    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();
-          }
-        },
-        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,
-      ),
-    ),
-  );
+        }, 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))));
 });
 export default ColorInputPanel;