@itwin/itwinui-react 3.12.0 → 3.12.2

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'ColorInputPanel', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _IconButton = require('../Buttons/IconButton.js');
@@ -144,7 +143,7 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
       applyHsvColorChange(color.toHsvColor(), true, color);
     }
   };
-  const hexInputField = (0, _jsxruntime.jsx)(_Input.Input, {
+  const hexInputField = _react.createElement(_Input.Input, {
     size: 'small',
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
@@ -169,139 +168,102 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     },
     status: validHexInput ? undefined : 'negative',
   });
-  const hslInputs = (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-      (0, _jsxruntime.jsx)(_Input.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.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,
-      }),
-      (0, _jsxruntime.jsx)(_Input.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.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,
-      }),
-      (0, _jsxruntime.jsx)(_Input.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.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 &&
-        (0, _jsxruntime.jsx)(_Input.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 = (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-      (0, _jsxruntime.jsx)(_Input.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.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') {
@@ -316,48 +278,102 @@ 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,
       }),
-      (0, _jsxruntime.jsx)(_Input.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.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,
-      }),
-      (0, _jsxruntime.jsx)(_Input.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.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.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.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') {
@@ -372,80 +388,55 @@ 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 &&
-        (0, _jsxruntime.jsx)(_Input.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 = (0, _index.useId)();
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    className: (0, _classnames.default)('iui-color-input-wrapper', className),
-    ref: ref,
-    ...rest,
-    children: [
-      (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-color-input-wrapper', className),
+      ref: ref,
+      ...rest,
+    },
+    _react.createElement(
+      _index.Box,
+      {
         className: 'iui-color-picker-section-label',
         id: labelId,
-        children:
-          showAlpha && currentFormat !== 'hex'
-            ? currentFormat.toUpperCase() + 'A'
-            : currentFormat.toUpperCase(),
-      }),
-      (0, _jsxruntime.jsxs)(_index.Box, {
+      },
+      showAlpha && currentFormat !== 'hex'
+        ? currentFormat.toUpperCase() + 'A'
+        : currentFormat.toUpperCase(),
+    ),
+    _react.createElement(
+      _index.Box,
+      {
         className: 'iui-color-input',
-        children: [
-          allowedColorFormats.length > 1 &&
-            (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-              styleType: 'borderless',
-              onClick: swapColorFormat,
-              size: 'small',
-              label: 'Switch format',
-              children: (0, _jsxruntime.jsx)(_index.SvgSwap, {}),
-            }),
-          (0, _jsxruntime.jsxs)(_index.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.IconButton,
+          {
+            styleType: 'borderless',
+            onClick: swapColorFormat,
+            size: 'small',
+            label: 'Switch format',
+          },
+          _react.createElement(_index.SvgSwap, null),
+        ),
+      _react.createElement(
+        _index.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,
+      ),
+    ),
+  );
 });

package/cjs/core/ColorPicker/ColorPalette.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'ColorPalette', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
@@ -21,38 +20,43 @@ const ColorPalette = _react.forwardRef((props, ref) => {
   const { colors, label, className, children, ...rest } = props;
   const { activeColor, setActiveColor, onChangeComplete } = (0,
   _ColorPickerContext.useColorPickerContext)();
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    className: (0, _classnames.default)('iui-color-palette-wrapper', className),
-    ref: ref,
-    ...rest,
-    children: [
-      label &&
-        (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-color-palette-wrapper',
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    label &&
+      _react.createElement(
+        _index.Box,
+        {
           className: 'iui-color-picker-section-label',
-          children: label,
-        }),
-      (0, _jsxruntime.jsxs)(_index.Box, {
+        },
+        label,
+      ),
+    _react.createElement(
+      _index.Box,
+      {
         className: 'iui-color-palette',
-        children: [
-          children,
-          colors &&
-            colors.map((_color, index) => {
-              const color = (0, _ColorPicker.getColorValue)(_color);
-              return (0, _jsxruntime.jsx)(
-                _ColorSwatch.ColorSwatch,
-                {
-                  color: color,
-                  onClick: () => {
-                    onChangeComplete?.(color);
-                    setActiveColor(color);
-                  },
-                  isActive: color.equals(activeColor),
-                },
-                index,
-              );
-            }),
-        ],
-      }),
-    ],
-  });
+      },
+      children,
+      colors &&
+        colors.map((_color, index) => {
+          const color = (0, _ColorPicker.getColorValue)(_color);
+          return _react.createElement(_ColorSwatch.ColorSwatch, {
+            key: index,
+            color: color,
+            onClick: () => {
+              onChangeComplete?.(color);
+              setActiveColor(color);
+            },
+            isActive: color.equals(activeColor),
+          });
+        }),
+    ),
+  );
 });

package/cjs/core/ColorPicker/ColorPicker.js

@@ -19,7 +19,6 @@ _export(exports, {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _classnames = _interop_require_default._(require('classnames'));
@@ -75,17 +74,20 @@ const ColorPicker = _react.forwardRef((props, forwardedRef) => {
     },
     [onChange, onChangeComplete],
   );
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: (0, _classnames.default)(
-      'iui-color-picker',
-      {
-        'iui-popover-surface': applyBackground,
-      },
-      className,
-    ),
-    ref: (0, _index.useMergedRefs)(ref, forwardedRef),
-    ...rest,
-    children: (0, _jsxruntime.jsx)(
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-color-picker',
+        {
+          'iui-popover-surface': applyBackground,
+        },
+        className,
+      ),
+      ref: (0, _index.useMergedRefs)(ref, forwardedRef),
+      ...rest,
+    },
+    _react.createElement(
       _ColorPickerContext.ColorPickerContext.Provider,
       {
         value: {
@@ -96,8 +98,8 @@ const ColorPicker = _react.forwardRef((props, forwardedRef) => {
           onChangeComplete,
           showAlpha,
         },
-        children: children,
       },
+      children,
     ),
-  });
+  );
 });