@itwin/itwinui-react 3.12.0 → 3.12.2

package/cjs/core/Carousel/CarouselDotsList.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'CarouselDotsList', {
 });
 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 _CarouselContext = require('./CarouselContext.js');
@@ -87,18 +86,15 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
           (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
         const isClipped =
           index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-        return (0, _jsxruntime.jsx)(
-          _CarouselDot.CarouselDot,
-          {
-            'aria-label': `Slide ${index + 1}`,
-            isActive: index === currentIndex,
-            onClick: () => handleSlideChange(index),
-            isSmall: isSecondSmallDot,
-            isSmaller: isFirstSmallDot || isClipped,
-            id: idPrefix && `${idPrefix}--dot-${index}`,
-          },
-          index,
-        );
+        return _react.createElement(_CarouselDot.CarouselDot, {
+          key: index,
+          'aria-label': `Slide ${index + 1}`,
+          isActive: index === currentIndex,
+          onClick: () => handleSlideChange(index),
+          isSmall: isSecondSmallDot,
+          isSmaller: isFirstSmallDot || isClipped,
+          id: idPrefix && `${idPrefix}--dot-${index}`,
+        });
       });
   }, [
     slideCount,
@@ -145,20 +141,25 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
       }
     }
   };
-  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-    children: (0, _jsxruntime.jsx)(_index.Box, {
-      className: (0, _classnames.default)(
-        'iui-carousel-navigation-dots',
-        className,
-      ),
-      role: 'tablist',
-      'aria-label': 'Slides',
-      ref: refs,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      tabIndex: -1,
-      ...rest,
-      children: children ?? dots,
-    }),
-  });
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    _react.createElement(
+      _index.Box,
+      {
+        className: (0, _classnames.default)(
+          'iui-carousel-navigation-dots',
+          className,
+        ),
+        role: 'tablist',
+        'aria-label': 'Slides',
+        ref: refs,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        tabIndex: -1,
+        ...rest,
+      },
+      children ?? dots,
+    ),
+  );
 });

package/cjs/core/Carousel/CarouselNavigation.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'CarouselNavigation', {
 });
 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 _CarouselContext = require('./CarouselContext.js');
@@ -19,26 +18,34 @@ const _CarouselDotsList = require('./CarouselDotsList.js');
 const _index = require('../../utils/index.js');
 const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: (0, _classnames.default)('iui-carousel-navigation', className),
-    ref: ref,
-    ...rest,
-    children:
-      children ??
-      (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-          (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-carousel-navigation', className),
+      ref: ref,
+      ...rest,
+    },
+    children ??
+      _react.createElement(
+        _react.Fragment,
+        null,
+        _react.createElement(
+          _index.Box,
+          {
             className: 'iui-carousel-navigation-left',
-            children: (0, _jsxruntime.jsx)(PreviousButton, {}),
-          }),
-          (0, _jsxruntime.jsx)(_CarouselDotsList.CarouselDotsList, {}),
-          (0, _jsxruntime.jsx)(_index.Box, {
+          },
+          _react.createElement(PreviousButton, null),
+        ),
+        _react.createElement(_CarouselDotsList.CarouselDotsList, null),
+        _react.createElement(
+          _index.Box,
+          {
             className: 'iui-carousel-navigation-right',
-            children: (0, _jsxruntime.jsx)(NextButton, {}),
-          }),
-        ],
-      }),
-  });
+          },
+          _react.createElement(NextButton, null),
+        ),
+      ),
+  );
 });
 const PreviousButton = _react.forwardRef((props, ref) => {
   const context = _react.useContext(_CarouselContext.CarouselContext);
@@ -46,23 +53,26 @@ const PreviousButton = _react.forwardRef((props, ref) => {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
   const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
-  return (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-    styleType: 'borderless',
-    size: 'small',
-    tabIndex: -1,
-    'aria-label': 'Previous',
-    ref: ref,
-    ...props,
-    onClick: (e) => {
-      const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-      setCurrentIndex(prevIndex);
-      scrollToSlide.current(prevIndex, {
-        instant: e.detail > 3,
-      });
-      props?.onClick?.(e);
+  return _react.createElement(
+    _IconButton.IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      tabIndex: -1,
+      'aria-label': 'Previous',
+      ref: ref,
+      ...props,
+      onClick: (e) => {
+        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+        setCurrentIndex(prevIndex);
+        scrollToSlide.current(prevIndex, {
+          instant: e.detail > 3,
+        });
+        props?.onClick?.(e);
+      },
     },
-    children: (0, _jsxruntime.jsx)(_index.SvgChevronLeft, {}),
-  });
+    _react.createElement(_index.SvgChevronLeft, null),
+  );
 });
 const NextButton = _react.forwardRef((props, ref) => {
   const context = _react.useContext(_CarouselContext.CarouselContext);
@@ -70,23 +80,26 @@ const NextButton = _react.forwardRef((props, ref) => {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
   const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
-  return (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-    styleType: 'borderless',
-    size: 'small',
-    tabIndex: -1,
-    'aria-label': 'Next',
-    ref: ref,
-    ...props,
-    onClick: (e) => {
-      const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-      setCurrentIndex(nextIndex);
-      scrollToSlide.current(nextIndex, {
-        instant: e.detail > 3,
-      });
-      props?.onClick?.(e);
+  return _react.createElement(
+    _IconButton.IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      tabIndex: -1,
+      'aria-label': 'Next',
+      ref: ref,
+      ...props,
+      onClick: (e) => {
+        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+        setCurrentIndex(nextIndex);
+        scrollToSlide.current(nextIndex, {
+          instant: e.detail > 3,
+        });
+        props?.onClick?.(e);
+      },
     },
-    children: (0, _jsxruntime.jsx)(_index.SvgChevronRight, {}),
-  });
+    _react.createElement(_index.SvgChevronRight, null),
+  );
 });
 const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
   PreviousButton,

package/cjs/core/Carousel/CarouselSlide.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'CarouselSlide', {
 });
 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');
@@ -35,19 +34,25 @@ const CarouselSlide = _react.forwardRef((props, ref) => {
     false,
   );
   const refs = (0, _index.useMergedRefs)(intersectionRef, ref);
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: (0, _classnames.default)('iui-carousel-slider-item', className),
-    role: 'tabpanel',
-    'aria-roledescription': 'slide',
-    tabIndex: index === currentIndex ? 0 : undefined,
-    ref: refs,
-    inert: index !== currentIndex ? '' : undefined,
-    ...rest,
-    onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (event) => {
-      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-        event.preventDefault();
-      }
-    }),
-    children: children,
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-carousel-slider-item',
+        className,
+      ),
+      role: 'tabpanel',
+      'aria-roledescription': 'slide',
+      tabIndex: index === currentIndex ? 0 : undefined,
+      ref: refs,
+      inert: index !== currentIndex ? '' : undefined,
+      ...rest,
+      onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (event) => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          event.preventDefault();
+        }
+      }),
+    },
+    children,
+  );
 });

package/cjs/core/Carousel/CarouselSlider.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'CarouselSlider', {
 });
 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 _CarouselContext = require('./CarouselContext.js');
@@ -64,12 +63,15 @@ const CarouselSlider = _react.forwardRef((props, ref) => {
       isManuallyUpdating.current = false;
     }, 100);
   }, [isManuallyUpdating]);
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: (0, _classnames.default)('iui-carousel-slider', className),
-    ref: refs,
-    onScroll: handleOnScroll,
-    tabIndex: -1,
-    ...rest,
-    children: items,
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-carousel-slider', className),
+      ref: refs,
+      onScroll: handleOnScroll,
+      tabIndex: -1,
+      ...rest,
+    },
+    items,
+  );
 });

package/cjs/core/Checkbox/Checkbox.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Checkbox', {
 });
 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 _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
 const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
@@ -39,59 +38,63 @@ const Checkbox = _react.forwardRef((props, ref) => {
         : inputElementRef.current.checked;
     }
   });
-  const checkbox = (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-    children: [
-      (0, _jsxruntime.jsx)(_index.Box, {
-        as: 'input',
-        className: (0, _classnames.default)(
-          'iui-checkbox',
-          {
-            'iui-checkbox-visibility': variant === 'eyeball',
-            'iui-loading': isLoading,
-          },
-          className,
-        ),
-        style: style,
-        disabled: disabled || isLoading,
-        type: 'checkbox',
-        ref: refs,
-        ...rest,
+  const checkbox = _react.createElement(
+    _react.Fragment,
+    null,
+    _react.createElement(_index.Box, {
+      as: 'input',
+      className: (0, _classnames.default)(
+        '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.ProgressRadial, {
+        size: 'x-small',
+        indeterminate: true,
       }),
-      isLoading &&
-        (0, _jsxruntime.jsx)(_ProgressRadial.ProgressRadial, {
-          size: 'x-small',
-          indeterminate: true,
-        }),
-    ],
-  });
+  );
   const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
   const { className: labelClassName, ...restLabelProps } = labelProps;
   return !label
     ? checkbox
-    : (0, _jsxruntime.jsxs)(_index.Box, {
-        as: 'label',
-        className: (0, _classnames.default)(
-          'iui-checkbox-wrapper',
-          {
-            'iui-disabled': disabled,
-            [`iui-${status}`]: !!status,
-            'iui-loading': isLoading,
-          },
-          wrapperClassName,
-        ),
-        ...restWrapperProps,
-        children: [
-          checkbox,
-          label &&
-            (0, _jsxruntime.jsx)(_index.Box, {
+    : _react.createElement(
+        _index.Box,
+        {
+          as: 'label',
+          className: (0, _classnames.default)(
+            'iui-checkbox-wrapper',
+            {
+              'iui-disabled': disabled,
+              [`iui-${status}`]: !!status,
+              'iui-loading': isLoading,
+            },
+            wrapperClassName,
+          ),
+          ...restWrapperProps,
+        },
+        checkbox,
+        label &&
+          _react.createElement(
+            _index.Box,
+            {
               as: 'span',
               className: (0, _classnames.default)(
                 'iui-checkbox-label',
                 labelClassName,
               ),
               ...restLabelProps,
-              children: label,
-            }),
-        ],
-      });
+            },
+            label,
+          ),
+      );
 });

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'ColorBuilder', {
 });
 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');
@@ -216,15 +215,19 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
         break;
     }
   };
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    className: (0, _classnames.default)(
-      'iui-color-selection-wrapper',
-      className,
-    ),
-    ref: refs,
-    ...rest,
-    children: [
-      (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-color-selection-wrapper',
+        className,
+      ),
+      ref: refs,
+      ...rest,
+    },
+    _react.createElement(
+      _index.Box,
+      {
         className: 'iui-color-field',
         style: {
           '--iui-color-field-hue': hueColorString,
@@ -237,69 +240,69 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
           setColorDotActive(true);
           colorDotRef.current?.focus();
         },
-        children: (0, _jsxruntime.jsx)(_index.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(_index.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,
       }),
-      (0, _jsxruntime.jsx)(_Slider.Slider, {
+    ),
+    _react.createElement(_Slider.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.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 &&
-        (0, _jsxruntime.jsx)(_Slider.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',
-          }),
-        }),
-    ],
-  });
+  );
 });