@itwin/itwinui-react 3.12.0 → 3.12.1

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, 'ComboBoxMenuItem', {
   },
 });
 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 _helpers = require('./helpers.js');
@@ -41,47 +40,51 @@ const ComboBoxMenuItem = _react.memo(
       }
     };
     const refs = (0, _index.useMergedRefs)(forwardedRef, focusRef);
-    return (0, _jsxruntime.jsxs)(_ListItem.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 &&
-          (0, _jsxruntime.jsx)(_ListItem.ListItem.Icon, {
+    return _react.createElement(
+      _ListItem.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.ListItem.Icon,
+          {
             as: 'span',
             'aria-hidden': true,
-            children: startIcon,
-          }),
-        (0, _jsxruntime.jsxs)(_ListItem.ListItem.Content, {
-          children: [
-            children,
-            sublabel &&
-              (0, _jsxruntime.jsx)(_ListItem.ListItem.Description, {
-                children: sublabel,
-              }),
-          ],
-        }),
-        endIcon ||
-          (isSelected &&
-            (0, _jsxruntime.jsx)(_ListItem.ListItem.Icon, {
+          },
+          startIcon,
+        ),
+      _react.createElement(
+        _ListItem.ListItem.Content,
+        null,
+        children,
+        sublabel &&
+          _react.createElement(_ListItem.ListItem.Description, null, sublabel),
+      ),
+      endIcon ||
+        (isSelected &&
+          _react.createElement(
+            _ListItem.ListItem.Icon,
+            {
               as: 'span',
               'aria-hidden': true,
-              children:
-                endIcon ?? (0, _jsxruntime.jsx)(_index.SvgCheckmark, {}),
-            })),
-      ],
-    });
+            },
+            endIcon ?? _react.createElement(_index.SvgCheckmark, null),
+          )),
+    );
   }),
 );
 ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -9,12 +9,11 @@ Object.defineProperty(exports, 'ComboBoxMultipleContainer', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _jsxruntime = require('react/jsx-runtime');
 const _react = _interop_require_wildcard._(require('react'));
 const _SelectTagContainer = require('../Select/SelectTagContainer.js');
 const ComboBoxMultipleContainer = _react.forwardRef((props, ref) => {
   const { selectedItems = [], ...rest } = props;
-  return (0, _jsxruntime.jsx)(_SelectTagContainer.SelectTagContainer, {
+  return _react.createElement(_SelectTagContainer.SelectTagContainer, {
     ref: ref,
     tags: selectedItems,
     ...rest,

package/cjs/core/DatePicker/DatePicker.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 _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
@@ -408,199 +407,213 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
     return dayClass;
   };
   const dateTableId = (0, _index.useId)();
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    className: (0, _classnames.default)(
-      'iui-date-picker',
-      {
-        'iui-popover-surface': applyBackground,
-      },
-      className,
-    ),
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      (0, _jsxruntime.jsxs)('div', {
-        children: [
-          (0, _jsxruntime.jsxs)(_index.Box, {
-            as: 'div',
-            ...monthYearProps,
-            className: (0, _classnames.default)(
-              'iui-calendar-month-year',
-              monthYearProps?.className,
-            ),
-            children: [
-              showYearSelection &&
-                (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-                  styleType: 'borderless',
-                  onClick: handleMoveToPreviousYear,
-                  'aria-label': 'Previous year',
-                  size: 'small',
-                  children: (0, _jsxruntime.jsx)(
-                    _index.SvgChevronLeftDouble,
-                    {},
-                  ),
-                }),
-              (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-                styleType: 'borderless',
-                onClick: handleMoveToPreviousMonth,
-                'aria-label': 'Previous month',
-                size: 'small',
-                children: (0, _jsxruntime.jsx)(_index.SvgChevronLeft, {}),
-              }),
-              (0, _jsxruntime.jsxs)('span', {
-                'aria-live': 'polite',
-                children: [
-                  (0, _jsxruntime.jsx)(_index.Box, {
-                    as: 'span',
-                    id: dateTableId,
-                    title: monthNames[displayedMonthIndex],
-                    ...monthProps,
-                    className: (0, _classnames.default)(
-                      'iui-calendar-month',
-                      monthProps?.className,
-                    ),
-                    children: monthNames[displayedMonthIndex],
-                  }),
-                  ' ',
-                  displayedYear,
-                ],
-              }),
-              (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-                styleType: 'borderless',
-                onClick: handleMoveToNextMonth,
-                'aria-label': 'Next month',
-                size: 'small',
-                children: (0, _jsxruntime.jsx)(_index.SvgChevronRight, {}),
-              }),
-              showYearSelection &&
-                (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-                  styleType: 'borderless',
-                  onClick: handleMoveToNextYear,
-                  'aria-label': 'Next year',
-                  size: 'small',
-                  children: (0, _jsxruntime.jsx)(
-                    _index.SvgChevronRightDouble,
-                    {},
-                  ),
-                }),
-            ],
-          }),
-          (0, _jsxruntime.jsx)(_index.Box, {
-            as: 'div',
-            ...weekDayProps,
-            className: (0, _classnames.default)(
-              'iui-calendar-weekdays',
-              weekDayProps?.className,
-            ),
-            children: shortDays.map((day, index) =>
-              (0, _jsxruntime.jsx)(
-                'div',
-                {
-                  title: longDays[index],
-                  children: day,
-                },
-                day,
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-date-picker',
+        {
+          'iui-popover-surface': applyBackground,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    _react.createElement(
+      'div',
+      null,
+      _react.createElement(
+        _index.Box,
+        {
+          as: 'div',
+          ...monthYearProps,
+          className: (0, _classnames.default)(
+            'iui-calendar-month-year',
+            monthYearProps?.className,
+          ),
+        },
+        showYearSelection &&
+          _react.createElement(
+            _IconButton.IconButton,
+            {
+              styleType: 'borderless',
+              onClick: handleMoveToPreviousYear,
+              'aria-label': 'Previous year',
+              size: 'small',
+            },
+            _react.createElement(_index.SvgChevronLeftDouble, null),
+          ),
+        _react.createElement(
+          _IconButton.IconButton,
+          {
+            styleType: 'borderless',
+            onClick: handleMoveToPreviousMonth,
+            'aria-label': 'Previous month',
+            size: 'small',
+          },
+          _react.createElement(_index.SvgChevronLeft, null),
+        ),
+        _react.createElement(
+          'span',
+          {
+            'aria-live': 'polite',
+          },
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'span',
+              id: dateTableId,
+              title: monthNames[displayedMonthIndex],
+              ...monthProps,
+              className: (0, _classnames.default)(
+                'iui-calendar-month',
+                monthProps?.className,
               ),
-            ),
-          }),
-          (0, _jsxruntime.jsx)('div', {
-            onKeyDown: handleCalendarKeyDown,
-            role: 'listbox',
-            'aria-labelledby': dateTableId,
-            ...calendarProps,
-            children: weeks.map((weekDays, weekIndex) => {
-              return (0, _jsxruntime.jsx)(
+            },
+            monthNames[displayedMonthIndex],
+          ),
+          ' ',
+          displayedYear,
+        ),
+        _react.createElement(
+          _IconButton.IconButton,
+          {
+            styleType: 'borderless',
+            onClick: handleMoveToNextMonth,
+            'aria-label': 'Next month',
+            size: 'small',
+          },
+          _react.createElement(_index.SvgChevronRight, null),
+        ),
+        showYearSelection &&
+          _react.createElement(
+            _IconButton.IconButton,
+            {
+              styleType: 'borderless',
+              onClick: handleMoveToNextYear,
+              'aria-label': 'Next year',
+              size: 'small',
+            },
+            _react.createElement(_index.SvgChevronRightDouble, null),
+          ),
+      ),
+      _react.createElement(
+        _index.Box,
+        {
+          as: 'div',
+          ...weekDayProps,
+          className: (0, _classnames.default)(
+            '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(
+            _index.Box,
+            {
+              as: 'div',
+              key: `week-${displayedMonthIndex}-${weekIndex}`,
+              ...weekProps,
+              className: (0, _classnames.default)(
+                '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(_index.Box, {
+                  key: `day-${displayedMonthIndex}-${dayIndex}`,
+                  className: (0, _classnames.default)(
+                    getDayClass(weekDay),
+                    dayProps?.className,
+                  ),
+                  'aria-hidden': true,
+                });
+              }
+              return _react.createElement(
                 _index.Box,
                 {
                   as: 'div',
-                  ...weekProps,
+                  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: (0, _classnames.default)(
-                    'iui-calendar-week',
-                    weekProps?.className,
+                    getDayClass(weekDay),
+                    dayProps?.className,
                   ),
-                  children: weekDays.map((weekDay, dayIndex) => {
-                    const dateValue = weekDay.getDate();
-                    const isDisabled = isDateDisabled?.(weekDay);
-                    const isOutsideMonth =
-                      weekDay.getMonth() !== displayedMonthIndex;
-                    if (isOutsideMonth && !showDatesOutsideMonth) {
-                      return (0, _jsxruntime.jsx)(
-                        _index.Box,
-                        {
-                          className: (0, _classnames.default)(
-                            getDayClass(weekDay),
-                            dayProps?.className,
-                          ),
-                          'aria-hidden': true,
-                        },
-                        `day-${displayedMonthIndex}-${dayIndex}`,
-                      );
-                    }
-                    return (0, _jsxruntime.jsx)(
-                      _index.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: (0, _classnames.default)(
-                          getDayClass(weekDay),
-                          dayProps?.className,
-                        ),
-                        children: dateValue,
-                      },
-                      `day-${displayedMonthIndex}-${dayIndex}`,
-                    );
-                  }),
                 },
-                `week-${displayedMonthIndex}-${weekIndex}`,
+                dateValue,
               );
             }),
-          }),
-        ],
-      }),
-      showTime &&
-        (0, _jsxruntime.jsx)(_TimePicker.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.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/cjs/core/Dialog/Dialog.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Dialog', {
 });
 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 _DialogTitleBar = require('./DialogTitleBar.js');
@@ -40,40 +39,49 @@ const DialogComponent = _react.forwardRef((props, ref) => {
     ...rest
   } = props;
   const dialogRootRef = _react.useRef(null);
-  return (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
-    in: isOpen,
-    timeout: {
-      exit: 600,
+  return _react.createElement(
+    _reacttransitiongroup.Transition,
+    {
+      in: isOpen,
+      timeout: {
+        exit: 600,
+      },
+      mountOnEnter: true,
+      unmountOnExit: true,
     },
-    mountOnEnter: true,
-    unmountOnExit: true,
-    children: (0, _jsxruntime.jsx)(_DialogContext.DialogContext.Provider, {
-      value: {
-        isOpen,
-        onClose,
-        closeOnEsc,
-        closeOnExternalClick,
-        isDismissible,
-        preventDocumentScroll,
-        trapFocus,
-        setFocus,
-        isDraggable,
-        isResizable,
-        relativeTo,
-        dialogRootRef,
-        placement,
+    _react.createElement(
+      _DialogContext.DialogContext.Provider,
+      {
+        value: {
+          isOpen,
+          onClose,
+          closeOnEsc,
+          closeOnExternalClick,
+          isDismissible,
+          preventDocumentScroll,
+          trapFocus,
+          setFocus,
+          isDraggable,
+          isResizable,
+          relativeTo,
+          dialogRootRef,
+          placement,
+        },
       },
-      children: (0, _jsxruntime.jsx)(_index.Portal, {
-        portal: portal,
-        children: (0, _jsxruntime.jsx)(_index.Box, {
+      _react.createElement(
+        _index.Portal,
+        {
+          portal: portal,
+        },
+        _react.createElement(_index.Box, {
           className: (0, _classnames.default)('iui-dialog-wrapper', className),
           'data-iui-relative': relativeTo === 'container',
           ref: (0, _index.useMergedRefs)(ref, dialogRootRef),
           ...rest,
         }),
-      }),
-    }),
-  });
+      ),
+    ),
+  );
 });
 const Dialog = Object.assign(DialogComponent, {
   Backdrop: _DialogBackdrop.DialogBackdrop,

package/cjs/core/Dialog/DialogBackdrop.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'DialogBackdrop', {
 });
 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 _Backdrop = require('../Backdrop/Backdrop.js');
 const _index = require('../../utils/index.js');
@@ -41,7 +40,7 @@ const DialogBackdrop = _react.forwardRef((props, ref) => {
     }
     onMouseDown?.(event);
   };
-  return (0, _jsxruntime.jsx)(_Backdrop.Backdrop, {
+  return _react.createElement(_Backdrop.Backdrop, {
     isVisible: isVisible,
     className: (0, _classnames.default)(
       {