@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -16,25 +16,25 @@ const _index = require('../../utils/index.js');
 const _Slider = require('../Slider/Slider.js');
 const _ColorPickerContext = require('./ColorPickerContext.js');
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
-  const position = (0, _index.getBoundedValue)(pointer, rect.top, rect.bottom);
+  let position = (0, _index.getBoundedValue)(pointer, rect.top, rect.bottom);
   return ((position - rect.top) / rect.height) * 100;
 };
 const getHorizontalPercentageOfRectangle = (rect, pointer) => {
-  const position = (0, _index.getBoundedValue)(pointer, rect.left, rect.right);
+  let position = (0, _index.getBoundedValue)(pointer, rect.left, rect.right);
   return ((position - rect.left) / rect.width) * 100;
 };
 const ColorBuilder = _react.forwardRef((props, ref) => {
-  const { className, ...rest } = props;
-  const builderRef = _react.useRef();
-  const refs = (0, _index.useMergedRefs)(builderRef, ref);
-  const {
+  let { className, ...rest } = props;
+  let builderRef = _react.useRef();
+  let refs = (0, _index.useMergedRefs)(builderRef, ref);
+  let {
     activeColor,
     hsvColor,
     onChangeComplete,
     applyHsvColorChange,
     showAlpha,
   } = (0, _ColorPickerContext.useColorPickerContext)();
-  const hueSliderColor = _react.useMemo(
+  let hueSliderColor = _react.useMemo(
     () =>
       _index.ColorValue.create({
         h: hsvColor.h,
@@ -43,23 +43,23 @@ 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,
@@ -69,10 +69,10 @@ 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,
@@ -82,11 +82,11 @@ 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,
@@ -96,34 +96,30 @@ 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();
@@ -136,11 +132,9 @@ 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');
@@ -152,11 +146,9 @@ 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);
     },
@@ -167,25 +159,21 @@ 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);
@@ -196,7 +184,7 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
         break;
     }
   };
-  const handleColorDotKeyUp = (event) => {
+  let handleColorDotKeyUp = (event) => {
     keysPressed.current[event.key] = false;
     switch (event.key) {
       case 'ArrowUp':
@@ -208,9 +196,8 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
           keysPressed.current['ArrowDown'] ||
           keysPressed.current['ArrowLeft'] ||
           keysPressed.current['ArrowRight']
-        ) {
+        )
           return;
-        }
         onChangeComplete?.(_index.ColorValue.create(hsvColor));
         break;
     }

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -17,23 +17,23 @@ const _Input = require('../Input/Input.js');
 const _index = require('../../utils/index.js');
 const _ColorPickerContext = require('./ColorPickerContext.js');
 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 } = (0,
+  let inputsContainerRef = _react.useRef(null);
+  let { activeColor, applyHsvColorChange, hsvColor, showAlpha } = (0,
   _ColorPickerContext.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([
         _index.ColorValue.getFormattedColorNumber(hsvColor.h),
         _index.ColorValue.getFormattedColorNumber(hsl.s),
@@ -43,8 +43,8 @@ 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(),
@@ -59,38 +59,35 @@ 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 = _index.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 ||
@@ -100,13 +97,10 @@ 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 = _index.ColorValue.create({
         h,
         s,
@@ -114,8 +108,8 @@ 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 ||
@@ -125,13 +119,10 @@ 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 = _index.ColorValue.create({
         r,
         g,
@@ -139,11 +130,9 @@ 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.Input, {
+  let hexInputField = _react.createElement(_Input.Input, {
     size: 'small',
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
@@ -151,13 +140,13 @@ 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();
       }
@@ -166,9 +155,9 @@ 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.Input, {
@@ -184,19 +173,17 @@ 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.Input, {
       size: 'small',
@@ -211,19 +198,17 @@ 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.Input, {
       size: 'small',
@@ -238,19 +223,17 @@ 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.Input, {
@@ -266,22 +249,20 @@ 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.Input, {
@@ -296,19 +277,17 @@ 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.Input, {
       size: 'small',
@@ -322,19 +301,17 @@ 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.Input, {
       size: 'small',
@@ -348,19 +325,17 @@ 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.Input, {
@@ -376,22 +351,20 @@ 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 = (0, _index.useId)();
+  let labelId = (0, _index.useId)();
   return _react.createElement(
     _index.Box,
     {
@@ -405,7 +378,7 @@ 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(),
     ),
@@ -430,12 +403,12 @@ 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/cjs/core/ColorPicker/ColorPalette.js

@@ -17,8 +17,8 @@ const _ColorPicker = require('./ColorPicker.js');
 const _ColorSwatch = require('./ColorSwatch.js');
 const _ColorPickerContext = require('./ColorPickerContext.js');
 const ColorPalette = _react.forwardRef((props, ref) => {
-  const { colors, label, className, children, ...rest } = props;
-  const { activeColor, setActiveColor, onChangeComplete } = (0,
+  let { colors, label, className, children, ...rest } = props;
+  let { activeColor, setActiveColor, onChangeComplete } = (0,
   _ColorPickerContext.useColorPickerContext)();
   return _react.createElement(
     _index.Box,
@@ -46,7 +46,7 @@ const ColorPalette = _react.forwardRef((props, ref) => {
       children,
       colors &&
         colors.map((_color, index) => {
-          const color = (0, _ColorPicker.getColorValue)(_color);
+          let color = (0, _ColorPicker.getColorValue)(_color);
           return _react.createElement(_ColorSwatch.ColorSwatch, {
             key: index,
             color: color,