@itwin/itwinui-react 3.12.0 → 3.12.1

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import {
@@ -38,16 +37,22 @@ const VirtualizedComboBoxMenu = (props) => {
     itemRenderer: virtualItemRenderer,
     scrollToIndex: focusedVisibleIndex,
   });
-  return _jsx(Box, {
-    as: 'div',
-    ...outerProps,
-    ...rest,
-    children: _jsx('div', {
-      ...innerProps,
-      ref: innerProps.ref,
-      children: visibleChildren,
-    }),
-  });
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      ...outerProps,
+      ...rest,
+    },
+    React.createElement(
+      'div',
+      {
+        ...innerProps,
+        ref: innerProps.ref,
+      },
+      visibleChildren,
+    ),
+  );
 };
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
   const { className, children, style, ...rest } = props;
@@ -57,30 +62,34 @@ export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
   const refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
   return (
     popover.open &&
-    _jsx(Portal, {
-      portal: true,
-      children: _jsx(List, {
-        as: 'div',
-        className: cx('iui-menu', className),
-        id: `${id}-list`,
-        role: 'listbox',
-        ref: refs,
-        ...popover.getFloatingProps({
-          style: !enableVirtualization
-            ? style
-            : {
-                maxInlineSize: 0,
-                ...style,
-              },
-          ...rest,
-        }),
-        children: !enableVirtualization
+    React.createElement(
+      Portal,
+      {
+        portal: true,
+      },
+      React.createElement(
+        List,
+        {
+          as: 'div',
+          className: cx('iui-menu', className),
+          id: `${id}-list`,
+          role: 'listbox',
+          ref: refs,
+          ...popover.getFloatingProps({
+            style: !enableVirtualization
+              ? style
+              : {
+                  maxInlineSize: 0,
+                  ...style,
+                },
+            ...rest,
+          }),
+        },
+        !enableVirtualization
           ? children
-          : _jsx(VirtualizedComboBoxMenu, {
-              children: children,
-            }),
-      }),
-    })
+          : React.createElement(VirtualizedComboBoxMenu, null, children),
+      ),
+    )
   );
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import {
   useSafeContext,
@@ -33,46 +32,50 @@ export const ComboBoxMenuItem = React.memo(
       }
     };
     const refs = useMergedRefs(forwardedRef, focusRef);
-    return _jsxs(ListItem, {
-      as: 'div',
-      actionable: true,
-      size: size,
-      active: isSelected,
-      disabled: disabled,
-      focused: focusedIndex === index,
-      ref: refs,
-      onClick: () => onClick?.(value),
-      role: role,
-      tabIndex: role === 'presentation' ? undefined : -1,
-      'aria-selected': isSelected,
-      'aria-disabled': disabled,
-      'data-iui-index': index,
-      ...rest,
-      children: [
-        startIcon &&
-          _jsx(ListItem.Icon, {
+    return React.createElement(
+      ListItem,
+      {
+        as: 'div',
+        actionable: true,
+        size: size,
+        active: isSelected,
+        disabled: disabled,
+        focused: focusedIndex === index,
+        ref: refs,
+        onClick: () => onClick?.(value),
+        role: role,
+        tabIndex: role === 'presentation' ? undefined : -1,
+        'aria-selected': isSelected,
+        'aria-disabled': disabled,
+        'data-iui-index': index,
+        ...rest,
+      },
+      startIcon &&
+        React.createElement(
+          ListItem.Icon,
+          {
             as: 'span',
             'aria-hidden': true,
-            children: startIcon,
-          }),
-        _jsxs(ListItem.Content, {
-          children: [
-            children,
-            sublabel &&
-              _jsx(ListItem.Description, {
-                children: sublabel,
-              }),
-          ],
-        }),
-        endIcon ||
-          (isSelected &&
-            _jsx(ListItem.Icon, {
+          },
+          startIcon,
+        ),
+      React.createElement(
+        ListItem.Content,
+        null,
+        children,
+        sublabel && React.createElement(ListItem.Description, null, sublabel),
+      ),
+      endIcon ||
+        (isSelected &&
+          React.createElement(
+            ListItem.Icon,
+            {
               as: 'span',
               'aria-hidden': true,
-              children: endIcon ?? _jsx(SvgCheckmark, {}),
-            })),
-      ],
-    });
+            },
+            endIcon ?? React.createElement(SvgCheckmark, null),
+          )),
+    );
   }),
 );
 ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/esm/core/ComboBox/ComboBoxMultipleContainer.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { SelectTagContainer } from '../Select/SelectTagContainer.js';
 export const ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
   const { selectedItems = [], ...rest } = props;
-  return _jsx(SelectTagContainer, {
+  return React.createElement(SelectTagContainer, {
     ref: ref,
     tags: selectedItems,
     ...rest,

package/esm/core/DatePicker/DatePicker.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 {
@@ -395,181 +394,195 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     return dayClass;
   };
   const dateTableId = useId();
-  return _jsxs(Box, {
-    className: cx(
-      'iui-date-picker',
-      {
-        'iui-popover-surface': applyBackground,
-      },
-      className,
-    ),
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      _jsxs('div', {
-        children: [
-          _jsxs(Box, {
-            as: 'div',
-            ...monthYearProps,
-            className: cx('iui-calendar-month-year', monthYearProps?.className),
-            children: [
-              showYearSelection &&
-                _jsx(IconButton, {
-                  styleType: 'borderless',
-                  onClick: handleMoveToPreviousYear,
-                  'aria-label': 'Previous year',
-                  size: 'small',
-                  children: _jsx(SvgChevronLeftDouble, {}),
-                }),
-              _jsx(IconButton, {
-                styleType: 'borderless',
-                onClick: handleMoveToPreviousMonth,
-                'aria-label': 'Previous month',
-                size: 'small',
-                children: _jsx(SvgChevronLeft, {}),
-              }),
-              _jsxs('span', {
-                'aria-live': 'polite',
-                children: [
-                  _jsx(Box, {
-                    as: 'span',
-                    id: dateTableId,
-                    title: monthNames[displayedMonthIndex],
-                    ...monthProps,
-                    className: cx('iui-calendar-month', monthProps?.className),
-                    children: monthNames[displayedMonthIndex],
-                  }),
-                  ' ',
-                  displayedYear,
-                ],
-              }),
-              _jsx(IconButton, {
-                styleType: 'borderless',
-                onClick: handleMoveToNextMonth,
-                'aria-label': 'Next month',
-                size: 'small',
-                children: _jsx(SvgChevronRight, {}),
-              }),
-              showYearSelection &&
-                _jsx(IconButton, {
-                  styleType: 'borderless',
-                  onClick: handleMoveToNextYear,
-                  'aria-label': 'Next year',
-                  size: 'small',
-                  children: _jsx(SvgChevronRightDouble, {}),
-                }),
-            ],
-          }),
-          _jsx(Box, {
-            as: 'div',
-            ...weekDayProps,
-            className: cx('iui-calendar-weekdays', weekDayProps?.className),
-            children: shortDays.map((day, index) =>
-              _jsx(
-                'div',
-                {
-                  title: longDays[index],
-                  children: day,
-                },
-                day,
-              ),
-            ),
-          }),
-          _jsx('div', {
-            onKeyDown: handleCalendarKeyDown,
-            role: 'listbox',
-            'aria-labelledby': dateTableId,
-            ...calendarProps,
-            children: weeks.map((weekDays, weekIndex) => {
-              return _jsx(
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-date-picker',
+        {
+          'iui-popover-surface': applyBackground,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      'div',
+      null,
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...monthYearProps,
+          className: cx('iui-calendar-month-year', monthYearProps?.className),
+        },
+        showYearSelection &&
+          React.createElement(
+            IconButton,
+            {
+              styleType: 'borderless',
+              onClick: handleMoveToPreviousYear,
+              'aria-label': 'Previous year',
+              size: 'small',
+            },
+            React.createElement(SvgChevronLeftDouble, null),
+          ),
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            onClick: handleMoveToPreviousMonth,
+            'aria-label': 'Previous month',
+            size: 'small',
+          },
+          React.createElement(SvgChevronLeft, null),
+        ),
+        React.createElement(
+          'span',
+          {
+            'aria-live': 'polite',
+          },
+          React.createElement(
+            Box,
+            {
+              as: 'span',
+              id: dateTableId,
+              title: monthNames[displayedMonthIndex],
+              ...monthProps,
+              className: cx('iui-calendar-month', monthProps?.className),
+            },
+            monthNames[displayedMonthIndex],
+          ),
+          ' ',
+          displayedYear,
+        ),
+        React.createElement(
+          IconButton,
+          {
+            styleType: 'borderless',
+            onClick: handleMoveToNextMonth,
+            'aria-label': 'Next month',
+            size: 'small',
+          },
+          React.createElement(SvgChevronRight, null),
+        ),
+        showYearSelection &&
+          React.createElement(
+            IconButton,
+            {
+              styleType: 'borderless',
+              onClick: handleMoveToNextYear,
+              'aria-label': 'Next year',
+              size: 'small',
+            },
+            React.createElement(SvgChevronRightDouble, null),
+          ),
+      ),
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...weekDayProps,
+          className: cx('iui-calendar-weekdays', weekDayProps?.className),
+        },
+        shortDays.map((day, index) =>
+          React.createElement(
+            'div',
+            {
+              key: day,
+              title: longDays[index],
+            },
+            day,
+          ),
+        ),
+      ),
+      React.createElement(
+        'div',
+        {
+          onKeyDown: handleCalendarKeyDown,
+          role: 'listbox',
+          'aria-labelledby': dateTableId,
+          ...calendarProps,
+        },
+        weeks.map((weekDays, weekIndex) => {
+          return React.createElement(
+            Box,
+            {
+              as: 'div',
+              key: `week-${displayedMonthIndex}-${weekIndex}`,
+              ...weekProps,
+              className: cx('iui-calendar-week', weekProps?.className),
+            },
+            weekDays.map((weekDay, dayIndex) => {
+              const dateValue = weekDay.getDate();
+              const isDisabled = isDateDisabled?.(weekDay);
+              const isOutsideMonth = weekDay.getMonth() !== displayedMonthIndex;
+              if (isOutsideMonth && !showDatesOutsideMonth) {
+                return React.createElement(Box, {
+                  key: `day-${displayedMonthIndex}-${dayIndex}`,
+                  className: cx(getDayClass(weekDay), dayProps?.className),
+                  'aria-hidden': true,
+                });
+              }
+              return React.createElement(
                 Box,
                 {
                   as: 'div',
-                  ...weekProps,
-                  className: cx('iui-calendar-week', weekProps?.className),
-                  children: weekDays.map((weekDay, dayIndex) => {
-                    const dateValue = weekDay.getDate();
-                    const isDisabled = isDateDisabled?.(weekDay);
-                    const isOutsideMonth =
-                      weekDay.getMonth() !== displayedMonthIndex;
-                    if (isOutsideMonth && !showDatesOutsideMonth) {
-                      return _jsx(
-                        Box,
-                        {
-                          className: cx(
-                            getDayClass(weekDay),
-                            dayProps?.className,
-                          ),
-                          'aria-hidden': true,
-                        },
-                        `day-${displayedMonthIndex}-${dayIndex}`,
-                      );
-                    }
-                    return _jsx(
-                      Box,
-                      {
-                        as: 'div',
-                        onClick: () => !isDisabled && onDayClick(weekDay),
-                        role: 'option',
-                        tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
-                        'aria-disabled': isDisabled ? 'true' : undefined,
-                        ref: (element) =>
-                          isSameDay(weekDay, focusedDay) &&
-                          needFocus.current &&
-                          element?.focus(),
-                        ...dayProps,
-                        className: cx(
-                          getDayClass(weekDay),
-                          dayProps?.className,
-                        ),
-                        children: dateValue,
-                      },
-                      `day-${displayedMonthIndex}-${dayIndex}`,
-                    );
-                  }),
+                  key: `day-${displayedMonthIndex}-${dayIndex}`,
+                  onClick: () => !isDisabled && onDayClick(weekDay),
+                  role: 'option',
+                  tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
+                  'aria-disabled': isDisabled ? 'true' : undefined,
+                  ref: (element) =>
+                    isSameDay(weekDay, focusedDay) &&
+                    needFocus.current &&
+                    element?.focus(),
+                  ...dayProps,
+                  className: cx(getDayClass(weekDay), dayProps?.className),
                 },
-                `week-${displayedMonthIndex}-${weekIndex}`,
+                dateValue,
               );
             }),
-          }),
-        ],
-      }),
-      showTime &&
-        _jsx(TimePicker, {
-          date: selectedStartDay ?? selectedDay,
-          use12Hours: use12Hours,
-          precision: precision,
-          hourStep: hourStep,
-          minuteStep: minuteStep,
-          secondStep: secondStep,
-          useCombinedRenderer: useCombinedRenderer,
-          combinedRenderer: combinedRenderer,
-          hourRenderer: hourRenderer,
-          minuteRenderer: minuteRenderer,
-          secondRenderer: secondRenderer,
-          meridiemRenderer: meridiemRenderer,
-          onChange: (date) =>
-            isSingleOnChange(onChange, enableRangeSelect)
-              ? onChange?.(date)
-              : onChange?.(
-                  new Date(
-                    selectedStartDay?.getFullYear() ?? date.getFullYear(),
-                    selectedStartDay?.getMonth() ?? date.getMonth(),
-                    selectedStartDay?.getDate() ?? date.getDate(),
-                    date.getHours(),
-                    date.getMinutes(),
-                    date.getSeconds(),
-                  ),
-                  new Date(
-                    selectedEndDay?.getFullYear() ?? date.getFullYear(),
-                    selectedEndDay?.getMonth() ?? date.getMonth(),
-                    selectedEndDay?.getDate() ?? date.getDate(),
-                    date.getHours(),
-                    date.getMinutes(),
-                    date.getSeconds(),
-                  ),
-                ),
+          );
         }),
-    ],
-  });
+      ),
+    ),
+    showTime &&
+      React.createElement(TimePicker, {
+        date: selectedStartDay ?? selectedDay,
+        use12Hours: use12Hours,
+        precision: precision,
+        hourStep: hourStep,
+        minuteStep: minuteStep,
+        secondStep: secondStep,
+        useCombinedRenderer: useCombinedRenderer,
+        combinedRenderer: combinedRenderer,
+        hourRenderer: hourRenderer,
+        minuteRenderer: minuteRenderer,
+        secondRenderer: secondRenderer,
+        meridiemRenderer: meridiemRenderer,
+        onChange: (date) =>
+          isSingleOnChange(onChange, enableRangeSelect)
+            ? onChange?.(date)
+            : onChange?.(
+                new Date(
+                  selectedStartDay?.getFullYear() ?? date.getFullYear(),
+                  selectedStartDay?.getMonth() ?? date.getMonth(),
+                  selectedStartDay?.getDate() ?? date.getDate(),
+                  date.getHours(),
+                  date.getMinutes(),
+                  date.getSeconds(),
+                ),
+                new Date(
+                  selectedEndDay?.getFullYear() ?? date.getFullYear(),
+                  selectedEndDay?.getMonth() ?? date.getMonth(),
+                  selectedEndDay?.getDate() ?? date.getDate(),
+                  date.getHours(),
+                  date.getMinutes(),
+                  date.getSeconds(),
+                ),
+              ),
+      }),
+  );
 });

package/esm/core/Dialog/Dialog.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { DialogTitleBar } from './DialogTitleBar.js';
@@ -28,40 +27,49 @@ const DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const dialogRootRef = React.useRef(null);
-  return _jsx(Transition, {
-    in: isOpen,
-    timeout: {
-      exit: 600,
+  return React.createElement(
+    Transition,
+    {
+      in: isOpen,
+      timeout: {
+        exit: 600,
+      },
+      mountOnEnter: true,
+      unmountOnExit: true,
     },
-    mountOnEnter: true,
-    unmountOnExit: true,
-    children: _jsx(DialogContext.Provider, {
-      value: {
-        isOpen,
-        onClose,
-        closeOnEsc,
-        closeOnExternalClick,
-        isDismissible,
-        preventDocumentScroll,
-        trapFocus,
-        setFocus,
-        isDraggable,
-        isResizable,
-        relativeTo,
-        dialogRootRef,
-        placement,
+    React.createElement(
+      DialogContext.Provider,
+      {
+        value: {
+          isOpen,
+          onClose,
+          closeOnEsc,
+          closeOnExternalClick,
+          isDismissible,
+          preventDocumentScroll,
+          trapFocus,
+          setFocus,
+          isDraggable,
+          isResizable,
+          relativeTo,
+          dialogRootRef,
+          placement,
+        },
       },
-      children: _jsx(Portal, {
-        portal: portal,
-        children: _jsx(Box, {
+      React.createElement(
+        Portal,
+        {
+          portal: portal,
+        },
+        React.createElement(Box, {
           className: cx('iui-dialog-wrapper', className),
           'data-iui-relative': relativeTo === 'container',
           ref: useMergedRefs(ref, dialogRootRef),
           ...rest,
         }),
-      }),
-    }),
-  });
+      ),
+    ),
+  );
 });
 export const Dialog = Object.assign(DialogComponent, {
   Backdrop: DialogBackdrop,

package/esm/core/Dialog/DialogBackdrop.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Backdrop } from '../Backdrop/Backdrop.js';
 import { useMergedRefs } from '../../utils/index.js';
@@ -29,7 +28,7 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
     }
     onMouseDown?.(event);
   };
-  return _jsx(Backdrop, {
+  return React.createElement(Backdrop, {
     isVisible: isVisible,
     className: cx(
       {