@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/ColorPicker/ColorBuilder.js

@@ -9,26 +9,26 @@ import {
 } from '../../utils/index.js';
 import { Slider } from '../Slider/Slider.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-const getVerticalPercentageOfRectangle = (rect, pointer) => {
-  const position = getBoundedValue(pointer, rect.top, rect.bottom);
+let getVerticalPercentageOfRectangle = (rect, pointer) => {
+  let position = getBoundedValue(pointer, rect.top, rect.bottom);
   return ((position - rect.top) / rect.height) * 100;
 };
-const getHorizontalPercentageOfRectangle = (rect, pointer) => {
-  const position = getBoundedValue(pointer, rect.left, rect.right);
+let getHorizontalPercentageOfRectangle = (rect, pointer) => {
+  let position = getBoundedValue(pointer, rect.left, rect.right);
   return ((position - rect.left) / rect.width) * 100;
 };
 export const ColorBuilder = React.forwardRef((props, ref) => {
-  const { className, ...rest } = props;
-  const builderRef = React.useRef();
-  const refs = useMergedRefs(builderRef, ref);
-  const {
+  let { className, ...rest } = props;
+  let builderRef = React.useRef();
+  let refs = useMergedRefs(builderRef, ref);
+  let {
     activeColor,
     hsvColor,
     onChangeComplete,
     applyHsvColorChange,
     showAlpha,
   } = useColorPickerContext();
-  const hueSliderColor = React.useMemo(
+  let hueSliderColor = React.useMemo(
     () =>
       ColorValue.create({
         h: hsvColor.h,
@@ -37,23 +37,23 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
       }),
     [hsvColor.h],
   );
-  const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
-  const alphaValue = React.useMemo(
+  let sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
+  let alphaValue = React.useMemo(
     () => (showAlpha ? hsvColor.a ?? 1 : 1),
     [hsvColor.a, showAlpha],
   );
-  const dotColorString = React.useMemo(
+  let dotColorString = React.useMemo(
     () => activeColor.toHexString(),
     [activeColor],
   );
-  const [colorDotActive, setColorDotActive] = React.useState(false);
-  const hueColorString = hueSliderColor.toHexString();
-  const squareTop = 100 - hsvColor.v;
-  const squareLeft = hsvColor.s;
-  const updateHueSlider = React.useCallback(
+  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) => {
-      const hue = Number(huePercent.toFixed(2));
-      const newHsvColor = {
+      let hue = Number(huePercent.toFixed(2));
+      let newHsvColor = {
         h: hue,
         s: hsvColor.s,
         v: hsvColor.v,
@@ -63,10 +63,10 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     },
     [applyHsvColorChange, hsvColor],
   );
-  const updateOpacitySlider = React.useCallback(
+  let updateOpacitySlider = React.useCallback(
     (alphaPercent, selectionChanged) => {
-      const alpha = Number(alphaPercent.toFixed(2));
-      const newHsvColor = {
+      let alpha = Number(alphaPercent.toFixed(2));
+      let newHsvColor = {
         h: hsvColor.h,
         s: hsvColor.s,
         v: hsvColor.v,
@@ -76,11 +76,11 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     },
     [applyHsvColorChange, hsvColor],
   );
-  const squareRef = React.useRef(null);
-  const colorDotRef = React.useRef(null);
-  const updateColorDot = React.useCallback(
+  let squareRef = React.useRef(null);
+  let colorDotRef = React.useRef(null);
+  let updateColorDot = React.useCallback(
     (x, y, selectionChanged) => {
-      const newHsvColor = {
+      let newHsvColor = {
         h: hsvColor.h,
         s: x,
         v: 100 - y,
@@ -90,34 +90,30 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     },
     [applyHsvColorChange, hsvColor],
   );
-  const updateSquareValue = React.useCallback(
+  let updateSquareValue = React.useCallback(
     (event, callbackType) => {
       if (
         (squareRef.current && colorDotActive) ||
-        (squareRef.current && callbackType === 'onClick')
+        (squareRef.current && 'onClick' === callbackType)
       ) {
-        const percentX = getHorizontalPercentageOfRectangle(
+        let percentX = getHorizontalPercentageOfRectangle(
           squareRef.current.getBoundingClientRect(),
           event.clientX,
         );
-        const percentY = getVerticalPercentageOfRectangle(
+        let percentY = getVerticalPercentageOfRectangle(
           squareRef.current.getBoundingClientRect(),
           event.clientY,
         );
-        if (callbackType === 'onChange') {
-          updateColorDot(percentX, percentY, true);
-        } else {
-          updateColorDot(percentX, percentY, false);
-        }
+        'onChange' === callbackType
+          ? updateColorDot(percentX, percentY, true)
+          : updateColorDot(percentX, percentY, false);
       }
     },
     [colorDotActive, updateColorDot],
   );
-  const handleSquarePointerUp = React.useCallback(
+  let handleSquarePointerUp = React.useCallback(
     (event) => {
-      if (!colorDotActive) {
-        return;
-      }
+      if (!colorDotActive) return;
       updateSquareValue(event, 'onChange');
       setColorDotActive(false);
       event.preventDefault();
@@ -130,11 +126,9 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     handleSquarePointerUp,
     builderRef.current?.ownerDocument,
   );
-  const handleSquarePointerMove = React.useCallback(
+  let handleSquarePointerMove = React.useCallback(
     (event) => {
-      if (!colorDotActive) {
-        return;
-      }
+      if (!colorDotActive) return;
       event.preventDefault();
       event.stopPropagation();
       updateSquareValue(event, 'onUpdate');
@@ -146,11 +140,9 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     handleSquarePointerMove,
     builderRef.current?.ownerDocument,
   );
-  const handleSquarePointerLeave = React.useCallback(
+  let handleSquarePointerLeave = React.useCallback(
     (event) => {
-      if (!colorDotActive) {
-        return;
-      }
+      if (!colorDotActive) return;
       updateSquareValue(event, 'onChange');
       setColorDotActive(false);
     },
@@ -161,25 +153,21 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     handleSquarePointerLeave,
     builderRef.current?.ownerDocument,
   );
-  const keysPressed = React.useRef({});
-  const handleColorDotKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
+  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': {
+      case 'ArrowDown':
         y = Math.min(y + 1, 100);
         updateColorDot(x, y, false);
         break;
-      }
-      case 'ArrowUp': {
+      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);
@@ -190,7 +178,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         break;
     }
   };
-  const handleColorDotKeyUp = (event) => {
+  let handleColorDotKeyUp = (event) => {
     keysPressed.current[event.key] = false;
     switch (event.key) {
       case 'ArrowUp':
@@ -202,9 +190,8 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
           keysPressed.current['ArrowDown'] ||
           keysPressed.current['ArrowLeft'] ||
           keysPressed.current['ArrowRight']
-        ) {
+        )
           return;
-        }
         onChangeComplete?.(ColorValue.create(hsvColor));
         break;
     }

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -5,23 +5,23 @@ 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) => {
-  const {
+  let {
     defaultColorFormat,
     allowedColorFormats = ['hsl', 'rgb', 'hex'],
     className,
     ...rest
   } = props;
-  const inputsContainerRef = React.useRef(null);
-  const { activeColor, applyHsvColorChange, hsvColor, showAlpha } =
+  let inputsContainerRef = React.useRef(null);
+  let { activeColor, applyHsvColorChange, hsvColor, showAlpha } =
     useColorPickerContext();
-  const [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
+  let [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
   React.useEffect(() => {
     setCurrentFormat(defaultColorFormat);
   }, [defaultColorFormat]);
-  const [input, setInput] = React.useState(['', '', '', '']);
+  let [input, setInput] = React.useState(['', '', '', '']);
   React.useEffect(() => {
-    if (currentFormat === 'hsl') {
-      const hsl = activeColor.toHslColor();
+    if ('hsl' === currentFormat) {
+      let hsl = activeColor.toHslColor();
       setInput([
         ColorValue.getFormattedColorNumber(hsvColor.h),
         ColorValue.getFormattedColorNumber(hsl.s),
@@ -31,8 +31,8 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
           2,
         ),
       ]);
-    } else if (currentFormat === 'rgb') {
-      const rgb = activeColor.toRgbColor();
+    } else if ('rgb' === currentFormat) {
+      let rgb = activeColor.toRgbColor();
       setInput([
         rgb.r.toString(),
         rgb.g.toString(),
@@ -47,38 +47,35 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       setValidHexInput(true);
     }
   }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
-  const [validHexInput, setValidHexInput] = React.useState(true);
-  const swapColorFormat = React.useCallback(() => {
-    const newFormat =
+  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]);
-  const isFocusInside = (focused) =>
+  let isFocusInside = (focused) =>
     !!(
       focused &&
       inputsContainerRef.current &&
       inputsContainerRef.current.contains(focused)
     );
-  const handleColorInputChange = () => {
+  let handleColorInputChange = () => {
     let color;
-    if (currentFormat === 'hex') {
+    if ('hex' === currentFormat)
       try {
-        const value = input[0].replace(/ /g, '').toLowerCase();
+        let value = input[0].replace(/ /g, '').toLowerCase();
         color = ColorValue.create(value);
         setValidHexInput(true);
-        if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
-          return;
-        }
+        if (activeColor.toHexString(showAlpha).toLowerCase() === value) return;
       } catch (_e) {
         setValidHexInput(false);
         return;
       }
-    }
-    if (currentFormat === 'hsl') {
-      const [h, s, l, a] = input.map(Number);
+    if ('hsl' === currentFormat) {
+      let [h, s, l, a] = input.map(Number);
       if (
         h < 0 ||
         h > 360 ||
@@ -88,13 +85,10 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         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;
-      }
+      let hsl = activeColor.toHslColor();
+      if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) return;
       color = ColorValue.create({
         h,
         s,
@@ -102,8 +96,8 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         a,
       });
     }
-    if (currentFormat === 'rgb') {
-      const [r, g, b, a] = input.map(Number);
+    if ('rgb' === currentFormat) {
+      let [r, g, b, a] = input.map(Number);
       if (
         r < 0 ||
         r > 255 ||
@@ -113,13 +107,10 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         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;
-      }
+      let rgb = activeColor.toRgbColor();
+      if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) return;
       color = ColorValue.create({
         r,
         g,
@@ -127,11 +118,9 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         a,
       });
     }
-    if (color) {
-      applyHsvColorChange(color.toHsvColor(), true, color);
-    }
+    if (color) applyHsvColorChange(color.toHsvColor(), true, color);
   };
-  const hexInputField = React.createElement(Input, {
+  let hexInputField = React.createElement(Input, {
     size: 'small',
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
@@ -139,13 +128,13 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     'aria-label': 'Hex',
     value: input[0],
     onChange: (event) => {
-      const value = event.target.value.startsWith('#')
+      let value = event.target.value.startsWith('#')
         ? event.target.value
         : `#${event.target.value}`;
       setInput([value]);
     },
     onKeyDown: (event) => {
-      if (event.key === 'Enter') {
+      if ('Enter' === event.key) {
         event.preventDefault();
         handleColorInputChange();
       }
@@ -154,9 +143,9 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       event.preventDefault();
       handleColorInputChange();
     },
-    status: validHexInput ? undefined : 'negative',
+    status: validHexInput ? void 0 : 'negative',
   });
-  const hslInputs = React.createElement(
+  let hslInputs = React.createElement(
     React.Fragment,
     null,
     React.createElement(Input, {
@@ -172,19 +161,17 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
       },
       onKeyDown: (event) => {
-        if (event.key === 'Enter') {
+        if ('Enter' === event.key) {
           event.preventDefault();
           handleColorInputChange();
         }
       },
       onBlur: (event) => {
         event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          handleColorInputChange();
-        }
+        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
       },
       status:
-        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
+        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : void 0,
     }),
     React.createElement(Input, {
       size: 'small',
@@ -199,19 +186,17 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
       },
       onKeyDown: (event) => {
-        if (event.key === 'Enter') {
+        if ('Enter' === event.key) {
           event.preventDefault();
           handleColorInputChange();
         }
       },
       onBlur: (event) => {
         event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          handleColorInputChange();
-        }
+        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
       },
       status:
-        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
+        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : void 0,
     }),
     React.createElement(Input, {
       size: 'small',
@@ -226,19 +211,17 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
       },
       onKeyDown: (event) => {
-        if (event.key === 'Enter') {
+        if ('Enter' === event.key) {
           event.preventDefault();
           handleColorInputChange();
         }
       },
       onBlur: (event) => {
         event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          handleColorInputChange();
-        }
+        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
       },
       status:
-        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
+        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : void 0,
     }),
     showAlpha &&
       React.createElement(Input, {
@@ -254,22 +237,20 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
           setInput([input[0], input[1], input[2], event.target.value]);
         },
         onKeyDown: (event) => {
-          if (event.key === 'Enter') {
+          if ('Enter' === event.key) {
             event.preventDefault();
             handleColorInputChange();
           }
         },
         onBlur: (event) => {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
+          if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
         },
         status:
-          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0,
       }),
   );
-  const rgbInputs = React.createElement(
+  let rgbInputs = React.createElement(
     React.Fragment,
     null,
     React.createElement(Input, {
@@ -284,19 +265,17 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
       },
       onKeyDown: (event) => {
-        if (event.key === 'Enter') {
+        if ('Enter' === event.key) {
           event.preventDefault();
           handleColorInputChange();
         }
       },
       onBlur: (event) => {
         event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          handleColorInputChange();
-        }
+        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
       },
       status:
-        Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
+        Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : void 0,
     }),
     React.createElement(Input, {
       size: 'small',
@@ -310,19 +289,17 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
       },
       onKeyDown: (event) => {
-        if (event.key === 'Enter') {
+        if ('Enter' === event.key) {
           event.preventDefault();
           handleColorInputChange();
         }
       },
       onBlur: (event) => {
         event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          handleColorInputChange();
-        }
+        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
       },
       status:
-        Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
+        Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : void 0,
     }),
     React.createElement(Input, {
       size: 'small',
@@ -336,19 +313,17 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
       },
       onKeyDown: (event) => {
-        if (event.key === 'Enter') {
+        if ('Enter' === event.key) {
           event.preventDefault();
           handleColorInputChange();
         }
       },
       onBlur: (event) => {
         event.preventDefault();
-        if (!isFocusInside(event.relatedTarget)) {
-          handleColorInputChange();
-        }
+        if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
       },
       status:
-        Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
+        Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : void 0,
     }),
     showAlpha &&
       React.createElement(Input, {
@@ -364,22 +339,20 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
           setInput([input[0], input[1], input[2], event.target.value]);
         },
         onKeyDown: (event) => {
-          if (event.key === 'Enter') {
+          if ('Enter' === event.key) {
             event.preventDefault();
             handleColorInputChange();
           }
         },
         onBlur: (event) => {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
+          if (!isFocusInside(event.relatedTarget)) handleColorInputChange();
         },
         status:
-          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : void 0,
       }),
   );
-  const labelId = useId();
+  let labelId = useId();
   return React.createElement(
     Box,
     {
@@ -393,7 +366,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         className: 'iui-color-picker-section-label',
         id: labelId,
       },
-      showAlpha && currentFormat !== 'hex'
+      showAlpha && 'hex' !== currentFormat
         ? currentFormat.toUpperCase() + 'A'
         : currentFormat.toUpperCase(),
     ),
@@ -418,12 +391,12 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         {
           ref: inputsContainerRef,
           className: 'iui-color-input-fields',
-          role: currentFormat !== 'hex' ? 'group' : undefined,
-          'aria-labelledby': currentFormat !== 'hex' ? labelId : undefined,
+          role: 'hex' !== currentFormat ? 'group' : void 0,
+          'aria-labelledby': 'hex' !== currentFormat ? labelId : void 0,
         },
-        currentFormat === 'hex' && hexInputField,
-        currentFormat === 'rgb' && rgbInputs,
-        currentFormat === 'hsl' && hslInputs,
+        'hex' === currentFormat && hexInputField,
+        'rgb' === currentFormat && rgbInputs,
+        'hsl' === currentFormat && hslInputs,
       ),
     ),
   );

package/esm/core/ColorPicker/ColorPalette.js

@@ -5,8 +5,8 @@ import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 export const ColorPalette = React.forwardRef((props, ref) => {
-  const { colors, label, className, children, ...rest } = props;
-  const { activeColor, setActiveColor, onChangeComplete } =
+  let { colors, label, className, children, ...rest } = props;
+  let { activeColor, setActiveColor, onChangeComplete } =
     useColorPickerContext();
   return React.createElement(
     Box,
@@ -31,7 +31,7 @@ export const ColorPalette = React.forwardRef((props, ref) => {
       children,
       colors &&
         colors.map((_color, index) => {
-          const color = getColorValue(_color);
+          let color = getColorValue(_color);
           return React.createElement(ColorSwatch, {
             key: index,
             color: color,