@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/ColorPicker/ColorBuilder.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import {
@@ -210,12 +209,16 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         break;
     }
   };
-  return _jsxs(Box, {
-    className: cx('iui-color-selection-wrapper', className),
-    ref: refs,
-    ...rest,
-    children: [
-      _jsx(Box, {
+  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,
@@ -228,69 +231,69 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
           setColorDotActive(true);
           colorDotRef.current?.focus();
         },
-        children: _jsx(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(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,
       }),
-      _jsx(Slider, {
+    ),
+    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: [sliderValue],
-        className: 'iui-hue-slider',
+        values: [alphaValue],
+        className: 'iui-opacity-slider',
         trackDisplayMode: 'none',
         tooltipProps: () => ({
           visible: false,
         }),
         onChange: (values) => {
-          updateHueSlider(values[0], true);
+          updateOpacitySlider(values[0], true);
         },
         onUpdate: (values) => {
-          updateHueSlider(values[0], false);
+          updateOpacitySlider(values[0], false);
         },
         min: 0,
-        max: 359,
+        max: 1,
+        step: 0.01,
+        style: {
+          '--iui-color-picker-selected-color': hueColorString,
+        },
         thumbProps: () => ({
-          'aria-label': 'Hue',
+          'aria-label': 'Opacity',
         }),
       }),
-      showAlpha &&
-        _jsx(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',
-          }),
-        }),
-    ],
-  });
+  );
 });

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -1,8 +1,3 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/IconButton.js';
@@ -136,7 +131,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       applyHsvColorChange(color.toHsvColor(), true, color);
     }
   };
-  const hexInputField = _jsx(Input, {
+  const hexInputField = React.createElement(Input, {
     size: 'small',
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
@@ -161,139 +156,102 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     },
     status: validHexInput ? undefined : 'negative',
   });
-  const hslInputs = _jsxs(_Fragment, {
-    children: [
-      _jsx(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 (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+  const 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 (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-        status:
-          Number(input[0]) < 0 || Number(input[0]) > 360
-            ? 'negative'
-            : undefined,
-      }),
-      _jsx(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 (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
+    }),
+    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 (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-        status:
-          Number(input[1]) < 0 || Number(input[1]) > 100
-            ? 'negative'
-            : undefined,
-      }),
-      _jsx(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 (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
+    }),
+    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 (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-        status:
-          Number(input[2]) < 0 || Number(input[2]) > 100
-            ? 'negative'
-            : undefined,
-      }),
-      showAlpha &&
-        _jsx(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]);
-          },
-          onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          },
-          onBlur: (event) => {
-            event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          },
-          status:
-            Number(input[3]) < 0 || Number(input[3]) > 1
-              ? 'negative'
-              : undefined,
-        }),
-    ],
-  });
-  const rgbInputs = _jsxs(_Fragment, {
-    children: [
-      _jsx(Input, {
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
+    }),
+    showAlpha &&
+      React.createElement(Input, {
         size: 'small',
         type: 'number',
         min: '0',
-        max: '255',
-        placeholder: 'R',
-        'aria-label': 'Red',
-        value: input[0] ?? '',
+        max: '1',
+        step: '.01',
+        placeholder: 'A',
+        'aria-label': 'Alpha',
+        value: input[3] ?? '',
         onChange: (event) => {
-          setInput([event.target.value, input[1], input[2], input[3]]);
+          setInput([input[0], input[1], input[2], event.target.value]);
         },
         onKeyDown: (event) => {
           if (event.key === 'Enter') {
@@ -308,48 +266,102 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
           }
         },
         status:
-          Number(input[0]) < 0 || Number(input[0]) > 255
-            ? 'negative'
-            : undefined,
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
-      _jsx(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 (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+  );
+  const 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 (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-        status:
-          Number(input[1]) < 0 || Number(input[1]) > 255
-            ? 'negative'
-            : undefined,
-      }),
-      _jsx(Input, {
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
+    }),
+    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 (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
+    }),
+    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 (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
+    }),
+    showAlpha &&
+      React.createElement(Input, {
         size: 'small',
         type: 'number',
         min: '0',
-        max: '255',
-        placeholder: 'B',
-        'aria-label': 'Blue',
-        value: input[2] ?? '',
+        max: '1',
+        step: '.01',
+        placeholder: 'A',
+        'aria-label': 'Alpha',
+        value: input[3] ?? '',
         onChange: (event) => {
-          setInput([input[0], input[1], event.target.value, input[3]]);
+          setInput([input[0], input[1], input[2], event.target.value]);
         },
         onKeyDown: (event) => {
           if (event.key === 'Enter') {
@@ -364,80 +376,55 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
           }
         },
         status:
-          Number(input[2]) < 0 || Number(input[2]) > 255
-            ? 'negative'
-            : undefined,
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
-      showAlpha &&
-        _jsx(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]);
-          },
-          onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          },
-          onBlur: (event) => {
-            event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          },
-          status:
-            Number(input[3]) < 0 || Number(input[3]) > 1
-              ? 'negative'
-              : undefined,
-        }),
-    ],
-  });
+  );
   const labelId = useId();
-  return _jsxs(Box, {
-    className: cx('iui-color-input-wrapper', className),
-    ref: ref,
-    ...rest,
-    children: [
-      _jsx(Box, {
+  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,
-        children:
-          showAlpha && currentFormat !== 'hex'
-            ? currentFormat.toUpperCase() + 'A'
-            : currentFormat.toUpperCase(),
-      }),
-      _jsxs(Box, {
+      },
+      showAlpha && currentFormat !== 'hex'
+        ? currentFormat.toUpperCase() + 'A'
+        : currentFormat.toUpperCase(),
+    ),
+    React.createElement(
+      Box,
+      {
         className: 'iui-color-input',
-        children: [
-          allowedColorFormats.length > 1 &&
-            _jsx(IconButton, {
-              styleType: 'borderless',
-              onClick: swapColorFormat,
-              size: 'small',
-              label: 'Switch format',
-              children: _jsx(SvgSwap, {}),
-            }),
-          _jsxs(Box, {
-            ref: inputsContainerRef,
-            className: 'iui-color-input-fields',
-            role: currentFormat !== 'hex' ? 'group' : undefined,
-            'aria-labelledby': currentFormat !== 'hex' ? labelId : undefined,
-            children: [
-              currentFormat === 'hex' && hexInputField,
-              currentFormat === 'rgb' && rgbInputs,
-              currentFormat === 'hsl' && hslInputs,
-            ],
-          }),
-        ],
-      }),
-    ],
-  });
+      },
+      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: currentFormat !== 'hex' ? 'group' : undefined,
+          'aria-labelledby': currentFormat !== 'hex' ? labelId : undefined,
+        },
+        currentFormat === 'hex' && hexInputField,
+        currentFormat === 'rgb' && rgbInputs,
+        currentFormat === 'hsl' && hslInputs,
+      ),
+    ),
+  );
 });