@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/Checkbox/Checkbox.js

@@ -19,84 +19,31 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
 export const Checkbox = React.forwardRef((props, ref) => {
-  const {
-    className,
-    disabled = false,
-    indeterminate = false,
-    label,
-    status,
-    variant = 'default',
-    isLoading = false,
-    wrapperProps = {},
-    labelProps = {},
-    style,
-    ...rest
-  } = props;
-  const inputElementRef = React.useRef(null);
-  const refs = useMergedRefs(inputElementRef, ref);
-  React.useEffect(() => {
-    if (inputElementRef.current) {
-      inputElementRef.current.indeterminate = indeterminate;
-      inputElementRef.current.checked = indeterminate
-        ? false
-        : inputElementRef.current.checked;
-    }
-  });
-  const checkbox = React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(Box, {
-      as: 'input',
-      className: cx(
-        'iui-checkbox',
-        {
-          'iui-checkbox-visibility': variant === 'eyeball',
-          'iui-loading': isLoading,
-        },
-        className,
-      ),
-      style: style,
-      disabled: disabled || isLoading,
-      type: 'checkbox',
-      ref: refs,
-      ...rest,
-    }),
-    isLoading &&
-      React.createElement(ProgressRadial, {
-        size: 'x-small',
-        indeterminate: true,
-      }),
-  );
-  const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
-  const { className: labelClassName, ...restLabelProps } = labelProps;
-  return !label
-    ? checkbox
-    : React.createElement(
-        Box,
-        {
-          as: 'label',
-          className: cx(
-            'iui-checkbox-wrapper',
-            {
-              'iui-disabled': disabled,
-              [`iui-${status}`]: !!status,
-              'iui-loading': isLoading,
-            },
-            wrapperClassName,
-          ),
-          ...restWrapperProps,
-        },
+    const { className, disabled = false, indeterminate = false, label, status, variant = 'default', isLoading = false, wrapperProps = {}, labelProps = {}, style, ...rest } = props;
+    const inputElementRef = React.useRef(null);
+    const refs = useMergedRefs(inputElementRef, ref);
+    React.useEffect(() => {
+        if (inputElementRef.current) {
+            inputElementRef.current.indeterminate = indeterminate;
+            inputElementRef.current.checked = indeterminate
+                ? false
+                : inputElementRef.current.checked;
+        }
+    });
+    const checkbox = (React.createElement(React.Fragment, null,
+        React.createElement(Box, { as: 'input', className: cx('iui-checkbox', {
+                'iui-checkbox-visibility': variant === 'eyeball',
+                'iui-loading': isLoading,
+            }, className), style: style, disabled: disabled || isLoading, type: 'checkbox', ref: refs, ...rest }),
+        isLoading && React.createElement(ProgressRadial, { size: 'x-small', indeterminate: true })));
+    const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+    const { className: labelClassName, ...restLabelProps } = labelProps;
+    return !label ? (checkbox) : (React.createElement(Box, { as: 'label', className: cx('iui-checkbox-wrapper', {
+            'iui-disabled': disabled,
+            [`iui-${status}`]: !!status,
+            'iui-loading': isLoading,
+        }, wrapperClassName), ...restWrapperProps },
         checkbox,
-        label &&
-          React.createElement(
-            Box,
-            {
-              as: 'span',
-              className: cx('iui-checkbox-label', labelClassName),
-              ...restLabelProps,
-            },
-            label,
-          ),
-      );
+        label && (React.createElement(Box, { as: 'span', className: cx('iui-checkbox-label', labelClassName), ...restLabelProps }, label))));
 });
 export default Checkbox;

package/esm/core/ColorPicker/ColorBuilder.js

@@ -4,22 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  ColorValue,
-  getBoundedValue,
-  useEventListener,
-  useMergedRefs,
-  Box,
-} from '../utils/index.js';
+import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, Box, } 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);
-  return ((position - rect.top) / rect.height) * 100;
+    const 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);
-  return ((position - rect.left) / rect.width) * 100;
+    const position = getBoundedValue(pointer, rect.left, rect.right);
+    return ((position - rect.left) / rect.width) * 100;
 };
 /**
  * `ColorBuilder` consists of two parts:
@@ -27,275 +21,168 @@ const getHorizontalPercentageOfRectangle = (rect, pointer) => {
  * and a set of sliders to adjust hue and alpha values.
  */
 export const ColorBuilder = React.forwardRef((props, ref) => {
-  const { className, ...rest } = props;
-  const builderRef = React.useRef();
-  const refs = useMergedRefs(builderRef, ref);
-  const {
-    activeColor,
-    hsvColor,
-    onChangeComplete,
-    applyHsvColorChange,
-    showAlpha,
-  } = useColorPickerContext();
-  // Set values for slider
-  const hueSliderColor = React.useMemo(
-    () => ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }),
-    [hsvColor.h],
-  );
-  const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
-  const alphaValue = React.useMemo(
-    () => (showAlpha ? hsvColor.a ?? 1 : 1),
-    [hsvColor.a, showAlpha],
-  );
-  // Set values for color square and color dot
-  const 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;
-  // Update slider change
-  const updateHueSlider = React.useCallback(
-    (huePercent, selectionChanged) => {
-      const hue = Number(huePercent.toFixed(2));
-      const newHsvColor = {
-        h: hue,
-        s: hsvColor.s,
-        v: hsvColor.v,
-        a: hsvColor.a,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  // Update opacity slider change
-  const updateOpacitySlider = React.useCallback(
-    (alphaPercent, selectionChanged) => {
-      const alpha = Number(alphaPercent.toFixed(2));
-      const newHsvColor = {
-        h: hsvColor.h,
-        s: hsvColor.s,
-        v: hsvColor.v,
-        a: alpha,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  // Update Color field square change
-  const squareRef = React.useRef(null);
-  const colorDotRef = React.useRef(null);
-  const updateColorDot = React.useCallback(
-    (x, y, selectionChanged) => {
-      const newHsvColor = {
-        h: hsvColor.h,
-        s: x,
-        v: 100 - y,
-        a: hsvColor.a,
-      };
-      applyHsvColorChange(newHsvColor, selectionChanged);
-    },
-    [applyHsvColorChange, hsvColor],
-  );
-  const updateSquareValue = React.useCallback(
-    (event, callbackType) => {
-      if (
-        (squareRef.current && colorDotActive) ||
-        (squareRef.current && callbackType === 'onClick')
-      ) {
-        const percentX = getHorizontalPercentageOfRectangle(
-          squareRef.current.getBoundingClientRect(),
-          event.clientX,
-        );
-        const percentY = getVerticalPercentageOfRectangle(
-          squareRef.current.getBoundingClientRect(),
-          event.clientY,
-        );
-        if (callbackType === 'onChange') {
-          updateColorDot(percentX, percentY, true);
-        } else {
-          updateColorDot(percentX, percentY, false);
+    const { className, ...rest } = props;
+    const builderRef = React.useRef();
+    const refs = useMergedRefs(builderRef, ref);
+    const { activeColor, hsvColor, onChangeComplete, applyHsvColorChange, showAlpha, } = useColorPickerContext();
+    // Set values for slider
+    const hueSliderColor = React.useMemo(() => ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
+    const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
+    const alphaValue = React.useMemo(() => (showAlpha ? hsvColor.a ?? 1 : 1), [hsvColor.a, showAlpha]);
+    // Set values for color square and color dot
+    const 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;
+    // Update slider change
+    const updateHueSlider = React.useCallback((huePercent, selectionChanged) => {
+        const hue = Number(huePercent.toFixed(2));
+        const newHsvColor = {
+            h: hue,
+            s: hsvColor.s,
+            v: hsvColor.v,
+            a: hsvColor.a,
+        };
+        applyHsvColorChange(newHsvColor, selectionChanged);
+    }, [applyHsvColorChange, hsvColor]);
+    // Update opacity slider change
+    const updateOpacitySlider = React.useCallback((alphaPercent, selectionChanged) => {
+        const alpha = Number(alphaPercent.toFixed(2));
+        const newHsvColor = {
+            h: hsvColor.h,
+            s: hsvColor.s,
+            v: hsvColor.v,
+            a: alpha,
+        };
+        applyHsvColorChange(newHsvColor, selectionChanged);
+    }, [applyHsvColorChange, hsvColor]);
+    // Update Color field square change
+    const squareRef = React.useRef(null);
+    const colorDotRef = React.useRef(null);
+    const updateColorDot = React.useCallback((x, y, selectionChanged) => {
+        const newHsvColor = {
+            h: hsvColor.h,
+            s: x,
+            v: 100 - y,
+            a: hsvColor.a,
+        };
+        applyHsvColorChange(newHsvColor, selectionChanged);
+    }, [applyHsvColorChange, hsvColor]);
+    const updateSquareValue = React.useCallback((event, callbackType) => {
+        if ((squareRef.current && colorDotActive) ||
+            (squareRef.current && callbackType === 'onClick')) {
+            const percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
+            const percentY = getVerticalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientY);
+            if (callbackType === 'onChange') {
+                updateColorDot(percentX, percentY, true);
+            }
+            else {
+                updateColorDot(percentX, percentY, false);
+            }
         }
-      }
-    },
-    [colorDotActive, updateColorDot],
-  );
-  const handleSquarePointerUp = React.useCallback(
-    (event) => {
-      if (!colorDotActive) {
-        return;
-      }
-      updateSquareValue(event, 'onChange');
-      setColorDotActive(false);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  useEventListener(
-    'pointerup',
-    handleSquarePointerUp,
-    builderRef.current?.ownerDocument,
-  );
-  const handleSquarePointerMove = React.useCallback(
-    (event) => {
-      if (!colorDotActive) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      updateSquareValue(event, 'onUpdate');
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  useEventListener(
-    'pointermove',
-    handleSquarePointerMove,
-    builderRef.current?.ownerDocument,
-  );
-  const handleSquarePointerLeave = React.useCallback(
-    (event) => {
-      if (!colorDotActive) {
-        return;
-      }
-      updateSquareValue(event, 'onChange');
-      setColorDotActive(false);
-    },
-    [colorDotActive, updateSquareValue],
-  );
-  useEventListener(
-    'pointerleave',
-    handleSquarePointerLeave,
-    builderRef.current?.ownerDocument,
-  );
-  const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
-  // Arrow key navigation for color dot
-  const handleColorDotKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    let x = squareLeft;
-    let y = squareTop;
-    keysPressed.current[event.key] = true;
-    switch (event.key) {
-      case 'ArrowDown': {
-        y = Math.min(y + 1, 100);
-        updateColorDot(x, y, false);
-        break;
-      }
-      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);
-        break;
-      case 'ArrowRight':
-        x = Math.min(x + 1, 100);
-        updateColorDot(x, y, false);
-        break;
-    }
-  };
-  const handleColorDotKeyUp = (event) => {
-    keysPressed.current[event.key] = false;
-    switch (event.key) {
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        if (
-          keysPressed.current['ArrowUp'] ||
-          keysPressed.current['ArrowDown'] ||
-          keysPressed.current['ArrowLeft'] ||
-          keysPressed.current['ArrowRight']
-        ) {
-          return;
+    }, [colorDotActive, updateColorDot]);
+    const handleSquarePointerUp = React.useCallback((event) => {
+        if (!colorDotActive) {
+            return;
         }
-        onChangeComplete?.(ColorValue.create(hsvColor));
-        break;
-    }
-  };
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-color-selection-wrapper', className),
-      ref: refs,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        className: 'iui-color-field',
-        style: {
-          '--iui-color-field-hue': hueColorString,
-          '--iui-color-picker-selected-color': dotColorString,
-        },
-        ref: squareRef,
-        onPointerDown: (event) => {
-          event.preventDefault();
-          updateSquareValue(event, 'onClick');
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        },
-      },
-      React.createElement(Box, {
-        className: 'iui-color-dot',
-        style: {
-          '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
-          '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
-        },
-        onPointerDown: () => {
-          setColorDotActive(true);
-          colorDotRef.current?.focus();
-        },
-        onKeyDown: handleColorDotKeyDown,
-        onKeyUp: handleColorDotKeyUp,
-        tabIndex: 0,
-        ref: colorDotRef,
-      }),
-    ),
-    React.createElement(Slider, {
-      minLabel: '',
-      maxLabel: '',
-      values: [sliderValue],
-      className: 'iui-hue-slider',
-      trackDisplayMode: 'none',
-      tooltipProps: () => ({ visible: false }),
-      onChange: (values) => {
-        updateHueSlider(values[0], true);
-      },
-      onUpdate: (values) => {
-        updateHueSlider(values[0], false);
-      },
-      min: 0,
-      max: 359,
-      thumbProps: () => ({ 'aria-label': 'Hue' }),
-    }),
-    showAlpha &&
-      React.createElement(Slider, {
-        minLabel: '',
-        maxLabel: '',
-        values: [alphaValue],
-        className: 'iui-opacity-slider',
-        trackDisplayMode: 'none',
-        tooltipProps: () => ({ visible: false }),
-        onChange: (values) => {
-          updateOpacitySlider(values[0], true);
-        },
-        onUpdate: (values) => {
-          updateOpacitySlider(values[0], false);
-        },
-        min: 0,
-        max: 1,
-        step: 0.01,
-        style: {
-          '--iui-color-picker-selected-color': hueColorString,
-        },
-        thumbProps: () => ({ 'aria-label': 'Opacity' }),
-      }),
-  );
+        updateSquareValue(event, 'onChange');
+        setColorDotActive(false);
+        event.preventDefault();
+        event.stopPropagation();
+    }, [colorDotActive, updateSquareValue]);
+    useEventListener('pointerup', handleSquarePointerUp, builderRef.current?.ownerDocument);
+    const handleSquarePointerMove = React.useCallback((event) => {
+        if (!colorDotActive) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        updateSquareValue(event, 'onUpdate');
+    }, [colorDotActive, updateSquareValue]);
+    useEventListener('pointermove', handleSquarePointerMove, builderRef.current?.ownerDocument);
+    const handleSquarePointerLeave = React.useCallback((event) => {
+        if (!colorDotActive) {
+            return;
+        }
+        updateSquareValue(event, 'onChange');
+        setColorDotActive(false);
+    }, [colorDotActive, updateSquareValue]);
+    useEventListener('pointerleave', handleSquarePointerLeave, builderRef.current?.ownerDocument);
+    const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
+    // Arrow key navigation for color dot
+    const handleColorDotKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        let x = squareLeft;
+        let y = squareTop;
+        keysPressed.current[event.key] = true;
+        switch (event.key) {
+            case 'ArrowDown': {
+                y = Math.min(y + 1, 100);
+                updateColorDot(x, y, false);
+                break;
+            }
+            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);
+                break;
+            case 'ArrowRight':
+                x = Math.min(x + 1, 100);
+                updateColorDot(x, y, false);
+                break;
+        }
+    };
+    const handleColorDotKeyUp = (event) => {
+        keysPressed.current[event.key] = false;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                if (keysPressed.current['ArrowUp'] ||
+                    keysPressed.current['ArrowDown'] ||
+                    keysPressed.current['ArrowLeft'] ||
+                    keysPressed.current['ArrowRight']) {
+                    return;
+                }
+                onChangeComplete?.(ColorValue.create(hsvColor));
+                break;
+        }
+    };
+    return (React.createElement(Box, { className: cx('iui-color-selection-wrapper', className), ref: refs, ...rest },
+        React.createElement(Box, { className: 'iui-color-field', style: {
+                '--iui-color-field-hue': hueColorString,
+                '--iui-color-picker-selected-color': dotColorString,
+            }, ref: squareRef, onPointerDown: (event) => {
+                event.preventDefault();
+                updateSquareValue(event, 'onClick');
+                setColorDotActive(true);
+                colorDotRef.current?.focus();
+            } },
+            React.createElement(Box, { className: 'iui-color-dot', style: {
+                    '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
+                    '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
+                }, onPointerDown: () => {
+                    setColorDotActive(true);
+                    colorDotRef.current?.focus();
+                }, onKeyDown: handleColorDotKeyDown, onKeyUp: handleColorDotKeyUp, tabIndex: 0, ref: colorDotRef })),
+        React.createElement(Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
+                updateHueSlider(values[0], true);
+            }, onUpdate: (values) => {
+                updateHueSlider(values[0], false);
+            }, min: 0, max: 359, thumbProps: () => ({ 'aria-label': 'Hue' }) }),
+        showAlpha && (React.createElement(Slider, { minLabel: '', maxLabel: '', values: [alphaValue], className: 'iui-opacity-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
+                updateOpacitySlider(values[0], true);
+            }, onUpdate: (values) => {
+                updateOpacitySlider(values[0], false);
+            }, min: 0, max: 1, step: 0.01, style: {
+                '--iui-color-picker-selected-color': hueColorString,
+            }, thumbProps: () => ({ 'aria-label': 'Opacity' }) }))));
 });