@itwin/itwinui-react 3.13.3 → 3.14.0

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

@@ -4,369 +4,401 @@ 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';
-export 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 } = 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([
-                ColorValue.getFormattedColorNumber(hsvColor.h),
-                ColorValue.getFormattedColorNumber(hsl.s),
-                ColorValue.getFormattedColorNumber(hsl.l),
-                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(),
-                ColorValue.getFormattedColorNumber(rgb.a ?? activeColor.getAlpha() / 255, 2)
-            ]);
-        } else {
-            setInput([
-                activeColor.toHexString(showAlpha)
-            ]);
-            setValidHexInput(true);
+export 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 } =
+    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([
+        ColorValue.getFormattedColorNumber(hsvColor.h),
+        ColorValue.getFormattedColorNumber(hsl.s),
+        ColorValue.getFormattedColorNumber(hsl.l),
+        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(),
+        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 = 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 = 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 = ColorValue.create({
+        r,
+        g,
+        b,
+        a,
+      });
+    }
+    if (color) applyHsvColorChange(color.toHsvColor(), true, color);
+  };
+  let hexInputField = React.createElement(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, {
+      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();
         }
-    }, [
-        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 = 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();
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : void 0,
+    }),
+    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 ('Enter' === event.key) {
+          event.preventDefault();
+          handleColorInputChange();
         }
-        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 = ColorValue.create({
-                h,
-                s,
-                l,
-                a
-            });
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : void 0,
+    }),
+    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 ('Enter' === event.key) {
+          event.preventDefault();
+          handleColorInputChange();
         }
-        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 = ColorValue.create({
-                r,
-                g,
-                b,
-                a
-            });
-        }
-        if (color) applyHsvColorChange(color.toHsvColor(), true, color);
-    };
-    let hexInputField = React.createElement(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();
+        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : void 0,
+    }),
+    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]);
         },
-        onBlur: (event)=>{
+        onKeyDown: (event) => {
+          if ('Enter' === event.key) {
             event.preventDefault();
             handleColorInputChange();
+          }
         },
-        status: validHexInput ? void 0 : 'negative'
-    });
-    let 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]
-            ]);
+        onBlur: (event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
         },
-        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, {
-        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, {
-        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, {
-        size: "small",
-        type: "number",
-        min: "0",
-        max: "1",
-        step: ".01",
-        placeholder: "A",
-        "aria-label": "Alpha",
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0,
+      }),
+  );
+  let 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 ('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, {
+      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, {
+      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, {
+        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
-            ]);
+        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, {
-        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, {
-        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)=>{
+        onKeyDown: (event) => {
+          if ('Enter' === event.key) {
             event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
-        },
-        status: Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : void 0
-    }), 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 ('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, {
-        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
-            ]);
+            handleColorInputChange();
+          }
         },
-        onKeyDown: (event)=>{
-            if ('Enter' === event.key) {
-                event.preventDefault();
-                handleColorInputChange();
-            }
+        onBlur: (event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
         },
-        onBlur: (event)=>{
-            event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0,
+      }),
+  );
+  let 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 && 'hex' !== currentFormat
+        ? 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: 'hex' !== currentFormat ? 'group' : void 0,
+          'aria-labelledby': 'hex' !== currentFormat ? labelId : void 0,
         },
-        status: Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0
-    }));
-    let 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 && 'hex' !== currentFormat ? 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: 'hex' !== currentFormat ? 'group' : void 0,
-        "aria-labelledby": 'hex' !== currentFormat ? labelId : void 0
-    }, 'hex' === currentFormat && hexInputField, 'rgb' === currentFormat && rgbInputs, 'hsl' === currentFormat && hslInputs)));
+        'hex' === currentFormat && hexInputField,
+        'rgb' === currentFormat && rgbInputs,
+        'hsl' === currentFormat && hslInputs,
+      ),
+    ),
+  );
 });
 ColorInputPanel.displayName = 'ColorInputPanel';