@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/core/Checkbox/Checkbox.js

@@ -2,45 +2,84 @@ import cx from 'classnames';
 import * as React from 'react';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { useMergedRefs, Box } from '../../utils/index.js';
-export const Checkbox = React.forwardRef((props, ref)=>{
-    let { className, disabled = false, indeterminate = false, label, status, variant = 'default', isLoading = false, wrapperProps = {}, labelProps = {}, style, ...rest } = props;
-    let inputElementRef = React.useRef(null);
-    let refs = useMergedRefs(inputElementRef, ref);
-    React.useEffect(()=>{
-        if (inputElementRef.current) {
-            inputElementRef.current.indeterminate = indeterminate;
-            inputElementRef.current.checked = !indeterminate && inputElementRef.current.checked;
-        }
-    });
-    let checkbox = React.createElement(React.Fragment, null, React.createElement(Box, {
-        as: "input",
-        className: cx('iui-checkbox', {
-            'iui-checkbox-visibility': 'eyeball' === variant,
-            'iui-loading': isLoading
-        }, className),
-        style: style,
-        disabled: disabled || isLoading,
-        type: "checkbox",
-        ref: refs,
-        ...rest
-    }), isLoading && React.createElement(ProgressRadial, {
-        size: "x-small",
-        indeterminate: true
-    }));
-    let { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
-    let { className: labelClassName, ...restLabelProps } = labelProps;
-    return label ? 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)) : checkbox;
+export const Checkbox = React.forwardRef((props, ref) => {
+  let {
+    className,
+    disabled = false,
+    indeterminate = false,
+    label,
+    status,
+    variant = 'default',
+    isLoading = false,
+    wrapperProps = {},
+    labelProps = {},
+    style,
+    ...rest
+  } = props;
+  let inputElementRef = React.useRef(null);
+  let refs = useMergedRefs(inputElementRef, ref);
+  React.useEffect(() => {
+    if (inputElementRef.current) {
+      inputElementRef.current.indeterminate = indeterminate;
+      inputElementRef.current.checked =
+        !indeterminate && inputElementRef.current.checked;
+    }
+  });
+  let checkbox = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Box, {
+      as: 'input',
+      className: cx(
+        'iui-checkbox',
+        {
+          'iui-checkbox-visibility': 'eyeball' === variant,
+          'iui-loading': isLoading,
+        },
+        className,
+      ),
+      style: style,
+      disabled: disabled || isLoading,
+      type: 'checkbox',
+      ref: refs,
+      ...rest,
+    }),
+    isLoading &&
+      React.createElement(ProgressRadial, {
+        size: 'x-small',
+        indeterminate: true,
+      }),
+  );
+  let { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+  let { className: labelClassName, ...restLabelProps } = labelProps;
+  return label
+    ? 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,
+          ),
+      )
+    : checkbox;
 });
 Checkbox.displayName = 'Checkbox';

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

@@ -1,238 +1,287 @@
 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';
-let getVerticalPercentageOfRectangle = (rect, pointer)=>{
-    let position = getBoundedValue(pointer, rect.top, rect.bottom);
-    return (position - rect.top) / rect.height * 100;
+let getVerticalPercentageOfRectangle = (rect, pointer) => {
+  let position = getBoundedValue(pointer, rect.top, rect.bottom);
+  return ((position - rect.top) / rect.height) * 100;
 };
-let getHorizontalPercentageOfRectangle = (rect, pointer)=>{
-    let position = getBoundedValue(pointer, rect.left, rect.right);
-    return (position - rect.left) / rect.width * 100;
+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)=>{
-    let { className, ...rest } = props;
-    let builderRef = React.useRef();
-    let refs = useMergedRefs(builderRef, ref);
-    let { activeColor, hsvColor, onChangeComplete, applyHsvColorChange, showAlpha } = useColorPickerContext();
-    let hueSliderColor = React.useMemo(()=>ColorValue.create({
-            h: hsvColor.h,
-            s: 100,
-            v: 100
-        }), [
-        hsvColor.h
-    ]);
-    let sliderValue = React.useMemo(()=>hsvColor.h, [
-        hsvColor
-    ]);
-    let alphaValue = React.useMemo(()=>showAlpha ? hsvColor.a ?? 1 : 1, [
-        hsvColor.a,
-        showAlpha
-    ]);
-    let dotColorString = React.useMemo(()=>activeColor.toHexString(), [
-        activeColor
-    ]);
-    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)=>{
-        let hue = Number(huePercent.toFixed(2));
-        let newHsvColor = {
-            h: hue,
-            s: hsvColor.s,
-            v: hsvColor.v,
-            a: hsvColor.a
-        };
-        applyHsvColorChange(newHsvColor, selectionChanged);
-    }, [
-        applyHsvColorChange,
-        hsvColor
-    ]);
-    let updateOpacitySlider = React.useCallback((alphaPercent, selectionChanged)=>{
-        let alpha = Number(alphaPercent.toFixed(2));
-        let newHsvColor = {
-            h: hsvColor.h,
-            s: hsvColor.s,
-            v: hsvColor.v,
-            a: alpha
-        };
-        applyHsvColorChange(newHsvColor, selectionChanged);
-    }, [
-        applyHsvColorChange,
-        hsvColor
-    ]);
-    let squareRef = React.useRef(null);
-    let colorDotRef = React.useRef(null);
-    let updateColorDot = React.useCallback((x, y, selectionChanged)=>{
-        let newHsvColor = {
-            h: hsvColor.h,
-            s: x,
-            v: 100 - y,
-            a: hsvColor.a
-        };
-        applyHsvColorChange(newHsvColor, selectionChanged);
-    }, [
-        applyHsvColorChange,
-        hsvColor
-    ]);
-    let updateSquareValue = React.useCallback((event, callbackType)=>{
-        if (squareRef.current && colorDotActive || squareRef.current && 'onClick' === callbackType) {
-            let percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
-            let percentY = getVerticalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientY);
-            'onChange' === callbackType ? updateColorDot(percentX, percentY, true) : updateColorDot(percentX, percentY, false);
-        }
-    }, [
-        colorDotActive,
-        updateColorDot
-    ]);
-    let handleSquarePointerUp = React.useCallback((event)=>{
-        if (!colorDotActive) return;
-        updateSquareValue(event, 'onChange');
-        setColorDotActive(false);
-        event.preventDefault();
-        event.stopPropagation();
-    }, [
-        colorDotActive,
-        updateSquareValue
-    ]);
-    useEventListener('pointerup', handleSquarePointerUp, builderRef.current?.ownerDocument);
-    let handleSquarePointerMove = React.useCallback((event)=>{
-        if (!colorDotActive) return;
-        event.preventDefault();
-        event.stopPropagation();
-        updateSquareValue(event, 'onUpdate');
-    }, [
-        colorDotActive,
-        updateSquareValue
-    ]);
-    useEventListener('pointermove', handleSquarePointerMove, builderRef.current?.ownerDocument);
-    let handleSquarePointerLeave = React.useCallback((event)=>{
-        if (!colorDotActive) return;
-        updateSquareValue(event, 'onChange');
-        setColorDotActive(false);
-    }, [
-        colorDotActive,
-        updateSquareValue
-    ]);
-    useEventListener('pointerleave', handleSquarePointerLeave, builderRef.current?.ownerDocument);
-    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':
-                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;
-        }
-    };
-    let 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",
+export const ColorBuilder = React.forwardRef((props, ref) => {
+  let { className, ...rest } = props;
+  let builderRef = React.useRef();
+  let refs = useMergedRefs(builderRef, ref);
+  let {
+    activeColor,
+    hsvColor,
+    onChangeComplete,
+    applyHsvColorChange,
+    showAlpha,
+  } = useColorPickerContext();
+  let hueSliderColor = React.useMemo(
+    () =>
+      ColorValue.create({
+        h: hsvColor.h,
+        s: 100,
+        v: 100,
+      }),
+    [hsvColor.h],
+  );
+  let sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
+  let alphaValue = React.useMemo(
+    () => (showAlpha ? hsvColor.a ?? 1 : 1),
+    [hsvColor.a, showAlpha],
+  );
+  let dotColorString = React.useMemo(
+    () => activeColor.toHexString(),
+    [activeColor],
+  );
+  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) => {
+      let hue = Number(huePercent.toFixed(2));
+      let newHsvColor = {
+        h: hue,
+        s: hsvColor.s,
+        v: hsvColor.v,
+        a: hsvColor.a,
+      };
+      applyHsvColorChange(newHsvColor, selectionChanged);
+    },
+    [applyHsvColorChange, hsvColor],
+  );
+  let updateOpacitySlider = React.useCallback(
+    (alphaPercent, selectionChanged) => {
+      let alpha = Number(alphaPercent.toFixed(2));
+      let newHsvColor = {
+        h: hsvColor.h,
+        s: hsvColor.s,
+        v: hsvColor.v,
+        a: alpha,
+      };
+      applyHsvColorChange(newHsvColor, selectionChanged);
+    },
+    [applyHsvColorChange, hsvColor],
+  );
+  let squareRef = React.useRef(null);
+  let colorDotRef = React.useRef(null);
+  let updateColorDot = React.useCallback(
+    (x, y, selectionChanged) => {
+      let newHsvColor = {
+        h: hsvColor.h,
+        s: x,
+        v: 100 - y,
+        a: hsvColor.a,
+      };
+      applyHsvColorChange(newHsvColor, selectionChanged);
+    },
+    [applyHsvColorChange, hsvColor],
+  );
+  let updateSquareValue = React.useCallback(
+    (event, callbackType) => {
+      if (
+        (squareRef.current && colorDotActive) ||
+        (squareRef.current && 'onClick' === callbackType)
+      ) {
+        let percentX = getHorizontalPercentageOfRectangle(
+          squareRef.current.getBoundingClientRect(),
+          event.clientX,
+        );
+        let percentY = getVerticalPercentageOfRectangle(
+          squareRef.current.getBoundingClientRect(),
+          event.clientY,
+        );
+        'onChange' === callbackType
+          ? updateColorDot(percentX, percentY, true)
+          : updateColorDot(percentX, percentY, false);
+      }
+    },
+    [colorDotActive, updateColorDot],
+  );
+  let handleSquarePointerUp = React.useCallback(
+    (event) => {
+      if (!colorDotActive) return;
+      updateSquareValue(event, 'onChange');
+      setColorDotActive(false);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [colorDotActive, updateSquareValue],
+  );
+  useEventListener(
+    'pointerup',
+    handleSquarePointerUp,
+    builderRef.current?.ownerDocument,
+  );
+  let handleSquarePointerMove = React.useCallback(
+    (event) => {
+      if (!colorDotActive) return;
+      event.preventDefault();
+      event.stopPropagation();
+      updateSquareValue(event, 'onUpdate');
+    },
+    [colorDotActive, updateSquareValue],
+  );
+  useEventListener(
+    'pointermove',
+    handleSquarePointerMove,
+    builderRef.current?.ownerDocument,
+  );
+  let handleSquarePointerLeave = React.useCallback(
+    (event) => {
+      if (!colorDotActive) return;
+      updateSquareValue(event, 'onChange');
+      setColorDotActive(false);
+    },
+    [colorDotActive, updateSquareValue],
+  );
+  useEventListener(
+    'pointerleave',
+    handleSquarePointerLeave,
+    builderRef.current?.ownerDocument,
+  );
+  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':
+        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;
+    }
+  };
+  let 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
+          '--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",
+        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`
+          '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
+          '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
         },
-        onPointerDown: ()=>{
-            setColorDotActive(true);
-            colorDotRef.current?.focus();
+        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);
+        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);
+        onUpdate: (values) => {
+          updateOpacitySlider(values[0], false);
         },
         min: 0,
         max: 1,
         step: 0.01,
         style: {
-            '--iui-color-picker-selected-color': hueColorString
+          '--iui-color-picker-selected-color': hueColorString,
         },
-        thumbProps: ()=>({
-                'aria-label': 'Opacity'
-            })
-    }));
+        thumbProps: () => ({
+          'aria-label': 'Opacity',
+        }),
+      }),
+  );
 });
 ColorBuilder.displayName = 'ColorBuilder';