@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Buttons/SplitButton.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Button } from './Button.js';
@@ -38,28 +37,37 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     matchWidth: true,
   };
   const labelId = useId();
-  const trigger = _jsx(IconButton, {
-    styleType: styleType,
-    size: size,
-    disabled: props.disabled,
-    'aria-labelledby': props.labelProps?.id || labelId,
-    ...menuButtonProps,
-    children: visible ? _jsx(SvgCaretUpSmall, {}) : _jsx(SvgCaretDownSmall, {}),
-  });
+  const trigger = React.createElement(
+    IconButton,
+    {
+      styleType: styleType,
+      size: size,
+      disabled: props.disabled,
+      'aria-labelledby': props.labelProps?.id || labelId,
+      ...menuButtonProps,
+    },
+    visible
+      ? React.createElement(SvgCaretUpSmall, null)
+      : React.createElement(SvgCaretDownSmall, null),
+  );
   const [positionReference, setPositionReference] = React.useState(null);
-  return _jsxs(Box, {
-    as: 'div',
-    ...wrapperProps,
-    ref: setPositionReference,
-    className: cx(
-      'iui-button-split',
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      ...wrapperProps,
+      ref: setPositionReference,
+      className: cx(
+        'iui-button-split',
+        {
+          'iui-disabled': props.disabled,
+        },
+        wrapperProps?.className,
+      ),
+    },
+    React.createElement(
+      Button,
       {
-        'iui-disabled': props.disabled,
-      },
-      wrapperProps?.className,
-    ),
-    children: [
-      _jsx(Button, {
         className: className,
         styleType: styleType,
         size: size,
@@ -70,9 +78,12 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
           id: labelId,
           ...props.labelProps,
         },
-        children: children,
-      }),
-      _jsx(Menu, {
+      },
+      children,
+    ),
+    React.createElement(
+      Menu,
+      {
         popoverProps: popoverProps,
         trigger: trigger,
         portal: portal,
@@ -82,8 +93,8 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
             setVisible(false);
           }
         },
-        children: menuContent,
-      }),
-    ],
-  });
+      },
+      menuContent,
+    ),
+  );
 });

package/esm/core/Carousel/Carousel.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { useMergedRefs, Box, useLatestRef, useId } from '../../utils/index.js';
@@ -36,26 +35,32 @@ const CarouselComponent = React.forwardRef((props, ref) => {
   React.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
   }, [userOnSlideChange, currentIndex]);
-  return _jsx(Box, {
-    as: 'section',
-    'aria-roledescription': 'carousel',
-    ref: refs,
-    className: cx('iui-carousel', className),
-    ...rest,
-    id: id,
-    children: _jsx(CarouselContext.Provider, {
-      value: {
-        currentIndex,
-        setCurrentIndex,
-        slideCount,
-        setSlideCount,
-        idPrefix: id,
-        isManuallyUpdating,
-        scrollToSlide,
+  return React.createElement(
+    Box,
+    {
+      as: 'section',
+      'aria-roledescription': 'carousel',
+      ref: refs,
+      className: cx('iui-carousel', className),
+      ...rest,
+      id: id,
+    },
+    React.createElement(
+      CarouselContext.Provider,
+      {
+        value: {
+          currentIndex,
+          setCurrentIndex,
+          slideCount,
+          setSlideCount,
+          idPrefix: id,
+          isManuallyUpdating,
+          scrollToSlide,
+        },
       },
-      children: children,
-    }),
-  });
+      children,
+    ),
+  );
 });
 export const Carousel = Object.assign(CarouselComponent, {
   Slider: CarouselSlider,

package/esm/core/Carousel/CarouselDot.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { ButtonBase } from '../../utils/index.js';
 export const CarouselDot = React.forwardRef((props, ref) => {
   const { isActive, isSmaller, isSmall, className, ...rest } = props;
-  return _jsx(ButtonBase, {
+  return React.createElement(ButtonBase, {
     role: 'tab',
     tabIndex: isActive ? 0 : -1,
     className: cx(

package/esm/core/Carousel/CarouselDotsList.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
@@ -79,18 +78,15 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
           (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
         const isClipped =
           index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-        return _jsx(
-          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, {
+          key: index,
+          'aria-label': `Slide ${index + 1}`,
+          isActive: index === currentIndex,
+          onClick: () => handleSlideChange(index),
+          isSmall: isSecondSmallDot,
+          isSmaller: isFirstSmallDot || isClipped,
+          id: idPrefix && `${idPrefix}--dot-${index}`,
+        });
       });
   }, [
     slideCount,
@@ -137,17 +133,22 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
       }
     }
   };
-  return _jsx(_Fragment, {
-    children: _jsx(Box, {
-      className: cx('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(
+      Box,
+      {
+        className: cx('iui-carousel-navigation-dots', className),
+        role: 'tablist',
+        'aria-label': 'Slides',
+        ref: refs,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        tabIndex: -1,
+        ...rest,
+      },
+      children ?? dots,
+    ),
+  );
 });

package/esm/core/Carousel/CarouselNavigation.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 { CarouselContext } from './CarouselContext.js';
@@ -11,26 +6,34 @@ import { CarouselDotsList } from './CarouselDotsList.js';
 import { Box, SvgChevronLeft, SvgChevronRight } from '../../utils/index.js';
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
-  return _jsx(Box, {
-    className: cx('iui-carousel-navigation', className),
-    ref: ref,
-    ...rest,
-    children:
-      children ??
-      _jsxs(_Fragment, {
-        children: [
-          _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-carousel-navigation', className),
+      ref: ref,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          Box,
+          {
             className: 'iui-carousel-navigation-left',
-            children: _jsx(PreviousButton, {}),
-          }),
-          _jsx(CarouselDotsList, {}),
-          _jsx(Box, {
+          },
+          React.createElement(PreviousButton, null),
+        ),
+        React.createElement(CarouselDotsList, null),
+        React.createElement(
+          Box,
+          {
             className: 'iui-carousel-navigation-right',
-            children: _jsx(NextButton, {}),
-          }),
-        ],
-      }),
-  });
+          },
+          React.createElement(NextButton, null),
+        ),
+      ),
+  );
 });
 const PreviousButton = React.forwardRef((props, ref) => {
   const context = React.useContext(CarouselContext);
@@ -38,23 +41,26 @@ const PreviousButton = React.forwardRef((props, ref) => {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
   const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
-  return _jsx(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,
+    {
+      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: _jsx(SvgChevronLeft, {}),
-  });
+    React.createElement(SvgChevronLeft, null),
+  );
 });
 const NextButton = React.forwardRef((props, ref) => {
   const context = React.useContext(CarouselContext);
@@ -62,23 +68,26 @@ const NextButton = React.forwardRef((props, ref) => {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
   const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
-  return _jsx(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,
+    {
+      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: _jsx(SvgChevronRight, {}),
-  });
+    React.createElement(SvgChevronRight, null),
+  );
 });
 export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
   PreviousButton,

package/esm/core/Carousel/CarouselSlide.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import {
@@ -28,19 +27,22 @@ export const CarouselSlide = React.forwardRef((props, ref) => {
     false,
   );
   const refs = useMergedRefs(intersectionRef, ref);
-  return _jsx(Box, {
-    className: cx('iui-carousel-slider-item', className),
-    role: 'tabpanel',
-    'aria-roledescription': 'slide',
-    tabIndex: index === currentIndex ? 0 : undefined,
-    ref: refs,
-    inert: index !== currentIndex ? '' : undefined,
-    ...rest,
-    onKeyDown: mergeEventHandlers(props.onKeyDown, (event) => {
-      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-        event.preventDefault();
-      }
-    }),
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-carousel-slider-item', className),
+      role: 'tabpanel',
+      'aria-roledescription': 'slide',
+      tabIndex: index === currentIndex ? 0 : undefined,
+      ref: refs,
+      inert: index !== currentIndex ? '' : undefined,
+      ...rest,
+      onKeyDown: mergeEventHandlers(props.onKeyDown, (event) => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          event.preventDefault();
+        }
+      }),
+    },
+    children,
+  );
 });

package/esm/core/Carousel/CarouselSlider.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
@@ -57,12 +56,15 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
       isManuallyUpdating.current = false;
     }, 100);
   }, [isManuallyUpdating]);
-  return _jsx(Box, {
-    className: cx('iui-carousel-slider', className),
-    ref: refs,
-    onScroll: handleOnScroll,
-    tabIndex: -1,
-    ...rest,
-    children: items,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-carousel-slider', className),
+      ref: refs,
+      onScroll: handleOnScroll,
+      tabIndex: -1,
+      ...rest,
+    },
+    items,
+  );
 });

package/esm/core/Checkbox/Checkbox.js

@@ -1,8 +1,3 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
@@ -31,56 +26,60 @@ export const Checkbox = React.forwardRef((props, ref) => {
         : inputElementRef.current.checked;
     }
   });
-  const checkbox = _jsxs(_Fragment, {
-    children: [
-      _jsx(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,
+  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,
       }),
-      isLoading &&
-        _jsx(ProgressRadial, {
-          size: 'x-small',
-          indeterminate: true,
-        }),
-    ],
-  });
+  );
   const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
   const { className: labelClassName, ...restLabelProps } = labelProps;
   return !label
     ? checkbox
-    : _jsxs(Box, {
-        as: 'label',
-        className: cx(
-          'iui-checkbox-wrapper',
-          {
-            'iui-disabled': disabled,
-            [`iui-${status}`]: !!status,
-            'iui-loading': isLoading,
-          },
-          wrapperClassName,
-        ),
-        ...restWrapperProps,
-        children: [
-          checkbox,
-          label &&
-            _jsx(Box, {
+    : 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,
-              children: label,
-            }),
-        ],
-      });
+            },
+            label,
+          ),
+      );
 });