@itwin/itwinui-react 3.12.0 → 3.12.2

package/cjs/core/Tile/Tile.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Tile', {
 });
 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');
@@ -33,18 +32,21 @@ const TileWrapper = _react.forwardRef((props, forwardedRef) => {
   } = props;
   const [localActionable, setLocalActionable] = _react.useState(false);
   const isActionable = localActionable;
-  return (0, _jsxruntime.jsx)(TileContext.Provider, {
-    value: {
-      status,
-      variant,
-      isNew,
-      isSelected,
-      isLoading,
-      isActionable,
-      isDisabled,
-      setActionable: setLocalActionable,
+  return _react.createElement(
+    TileContext.Provider,
+    {
+      value: {
+        status,
+        variant,
+        isNew,
+        isSelected,
+        isLoading,
+        isActionable,
+        isDisabled,
+        setActionable: setLocalActionable,
+      },
     },
-    children: (0, _jsxruntime.jsx)(_index.Box, {
+    _react.createElement(_index.Box, {
       className: (0, _classnames.default)(
         'iui-tile',
         {
@@ -61,7 +63,7 @@ const TileWrapper = _react.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       ...rest,
     }),
-  });
+  );
 });
 TileWrapper.displayName = 'Tile.Wrapper';
 const TileAction = _react.forwardRef((props, forwardedRef) => {
@@ -72,15 +74,18 @@ const TileAction = _react.forwardRef((props, forwardedRef) => {
       setActionable(true);
     }
   }, [setActionable]);
-  return (0, _jsxruntime.jsx)(_LinkAction.LinkAction, {
-    as: !!props.href ? 'a' : 'button',
-    href: href,
-    onClick: !isDisabled ? onClick : undefined,
-    'aria-disabled': isDisabled,
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return _react.createElement(
+    _LinkAction.LinkAction,
+    {
+      as: !!props.href ? 'a' : 'button',
+      href: href,
+      onClick: !isDisabled ? onClick : undefined,
+      'aria-disabled': isDisabled,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileAction.displayName = 'Tile.Action';
 const TileThumbnailArea = (0, _index.polymorphic)('iui-tile-thumbnail');
@@ -88,7 +93,7 @@ TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
 const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
   const { className, url, children, ...rest } = props;
   if (url) {
-    return (0, _jsxruntime.jsx)(_index.Box, {
+    return _react.createElement(_index.Box, {
       className: (0, _classnames.default)(
         'iui-tile-thumbnail-picture',
         className,
@@ -100,12 +105,15 @@ const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
       ...rest,
     });
   }
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: (0, _classnames.default)('iui-thumbnail-icon', className),
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-thumbnail-icon', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
 const TileQuickAction = (0, _index.polymorphic)(
@@ -118,14 +126,20 @@ const TileTypeIndicator = (0, _index.polymorphic)(
 TileTypeIndicator.displayName = 'Tile.TypeIndicator';
 const TileIconButton = _react.forwardRef((props, forwardedRef) => {
   const { className, children, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-    className: (0, _classnames.default)('iui-tile-thumbnail-button', className),
-    styleType: 'borderless',
-    size: 'small',
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return _react.createElement(
+    _IconButton.IconButton,
+    {
+      className: (0, _classnames.default)(
+        'iui-tile-thumbnail-button',
+        className,
+      ),
+      styleType: 'borderless',
+      size: 'small',
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileIconButton.displayName = 'Tile.IconButton';
 const TileBadgeContainer = (0, _index.polymorphic)(
@@ -134,12 +148,15 @@ const TileBadgeContainer = (0, _index.polymorphic)(
 TileBadgeContainer.displayName = 'Tile.BadgeContainer';
 const TileName = _react.forwardRef((props, forwardedRef) => {
   const { className, children, name, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: (0, _classnames.default)('iui-tile-name', className),
-    ref: forwardedRef,
-    ...rest,
-    children: children ?? name,
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-tile-name', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ?? name,
+  );
 });
 TileBadgeContainer.displayName = 'Tile.Name';
 const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
@@ -150,34 +167,40 @@ const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
   const StatusIcon = !!status && _index.StatusIconMap[status];
   let icon;
   if (StatusIcon) {
-    icon = (0, _jsxruntime.jsx)(StatusIcon, {
+    icon = _react.createElement(StatusIcon, {
       'aria-hidden': true,
     });
   }
   if (isLoading) {
-    icon = (0, _jsxruntime.jsx)(_ProgressRadial.ProgressRadial, {
+    icon = _react.createElement(_ProgressRadial.ProgressRadial, {
       size: 'x-small',
       'aria-hidden': true,
       indeterminate: true,
     });
   }
   if (isSelected) {
-    icon = (0, _jsxruntime.jsx)(_index.SvgCheckmark, {
+    icon = _react.createElement(_index.SvgCheckmark, {
       'aria-hidden': true,
     });
   }
   if (isNew) {
-    icon = (0, _jsxruntime.jsx)(_index.SvgNew, {
+    icon = _react.createElement(_index.SvgNew, {
       'aria-hidden': true,
     });
   }
   return children || icon
-    ? (0, _jsxruntime.jsx)(_index.Box, {
-        className: (0, _classnames.default)('iui-tile-status-icon', className),
-        ref: forwardedRef,
-        ...rest,
-        children: children ?? icon,
-      })
+    ? _react.createElement(
+        _index.Box,
+        {
+          className: (0, _classnames.default)(
+            'iui-tile-status-icon',
+            className,
+          ),
+          ref: forwardedRef,
+          ...rest,
+        },
+        children ?? icon,
+      )
     : null;
 });
 TileNameIcon.displayName = 'Tile.NameIcon';
@@ -192,36 +215,45 @@ TileMetadata.displayName = 'Tile.Metadata';
 const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
   const { className, children = [], buttonProps, ...rest } = props;
   const [isMenuVisible, setIsMenuVisible] = _react.useState(false);
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: (0, _classnames.default)(
-      'iui-tile-more-options',
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    _react.createElement(
+      _DropdownMenu.DropdownMenu,
       {
-        'iui-visible': isMenuVisible,
+        onVisibleChange: setIsMenuVisible,
+        menuItems: (close) =>
+          children?.map((option) =>
+            _react.cloneElement(option, {
+              onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+              },
+            }),
+          ),
       },
-      className,
+      _react.createElement(
+        _IconButton.IconButton,
+        {
+          styleType: 'borderless',
+          size: 'small',
+          'aria-label': 'More options',
+          ...buttonProps,
+        },
+        _react.createElement(_index.SvgMore, null),
+      ),
     ),
-    ref: forwardedRef,
-    ...rest,
-    children: (0, _jsxruntime.jsx)(_DropdownMenu.DropdownMenu, {
-      onVisibleChange: setIsMenuVisible,
-      menuItems: (close) =>
-        children?.map((option) =>
-          _react.cloneElement(option, {
-            onClick: (value) => {
-              close();
-              option.props.onClick?.(value);
-            },
-          }),
-        ),
-      children: (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-        styleType: 'borderless',
-        size: 'small',
-        'aria-label': 'More options',
-        ...buttonProps,
-        children: (0, _jsxruntime.jsx)(_index.SvgMore, {}),
-      }),
-    }),
-  });
+  );
 });
 TileMoreOptions.displayName = 'Tile.MoreOptions';
 const TileButtons = (0, _index.polymorphic)('iui-tile-buttons');
@@ -247,77 +279,60 @@ const TileComponent = _react.forwardRef((props, forwardedRef) => {
     onClick,
     ...rest
   } = props;
-  return (0, _jsxruntime.jsxs)(TileWrapper, {
-    ref: forwardedRef,
-    isNew: isNew,
-    isSelected: isSelected,
-    isLoading: isLoading,
-    status: status,
-    isDisabled: isDisabled,
-    ...rest,
-    children: [
-      (0, _jsxruntime.jsxs)(TileName, {
-        children: [
-          (status || isNew || isLoading || isSelected) &&
-            (0, _jsxruntime.jsx)(TileNameIcon, {}),
-          (0, _jsxruntime.jsx)(TileNameLabel, {
-            children: isActionable
-              ? (0, _jsxruntime.jsx)(TileAction, {
-                  onClick: !isDisabled ? onClick : undefined,
-                  'aria-disabled': isDisabled,
-                  children: name,
-                })
-              : name,
-          }),
-        ],
-      }),
-      thumbnail &&
-        (0, _jsxruntime.jsxs)(TileThumbnailArea, {
-          children: [
-            typeof thumbnail !== 'string'
-              ? (0, _jsxruntime.jsx)(TileThumbnailPicture, {
-                  children: thumbnail,
-                })
-              : (0, _jsxruntime.jsx)(TileThumbnailPicture, {
-                  url: thumbnail,
-                }),
-            badge &&
-              (0, _jsxruntime.jsx)(TileBadgeContainer, {
-                children: badge,
-              }),
-            leftIcon &&
-              (0, _jsxruntime.jsx)(TileTypeIndicator, {
-                children: leftIcon,
-              }),
-            rightIcon &&
-              (0, _jsxruntime.jsx)(TileQuickAction, {
-                children: rightIcon,
-              }),
-          ],
-        }),
-      (0, _jsxruntime.jsxs)(TileContentArea, {
-        children: [
-          description &&
-            (0, _jsxruntime.jsx)(TileDescription, {
-              children: description,
-            }),
-          moreOptions &&
-            (0, _jsxruntime.jsx)(TileMoreOptions, {
-              children: moreOptions,
-            }),
-          metadata &&
-            (0, _jsxruntime.jsx)(TileMetadata, {
-              children: metadata,
+  return _react.createElement(
+    TileWrapper,
+    {
+      ref: forwardedRef,
+      isNew: isNew,
+      isSelected: isSelected,
+      isLoading: isLoading,
+      status: status,
+      isDisabled: isDisabled,
+      ...rest,
+    },
+    _react.createElement(
+      TileName,
+      null,
+      (status || isNew || isLoading || isSelected) &&
+        _react.createElement(TileNameIcon, null),
+      _react.createElement(
+        TileNameLabel,
+        null,
+        isActionable
+          ? _react.createElement(
+              TileAction,
+              {
+                onClick: !isDisabled ? onClick : undefined,
+                'aria-disabled': isDisabled,
+              },
+              name,
+            )
+          : name,
+      ),
+    ),
+    thumbnail &&
+      _react.createElement(
+        TileThumbnailArea,
+        null,
+        typeof thumbnail !== 'string'
+          ? _react.createElement(TileThumbnailPicture, null, thumbnail)
+          : _react.createElement(TileThumbnailPicture, {
+              url: thumbnail,
             }),
-          children,
-        ],
-      }),
-      buttons &&
-        (0, _jsxruntime.jsx)(TileButtons, {
-          children: buttons,
-        }),
-    ],
-  });
+        badge && _react.createElement(TileBadgeContainer, null, badge),
+        leftIcon && _react.createElement(TileTypeIndicator, null, leftIcon),
+        rightIcon && _react.createElement(TileQuickAction, null, rightIcon),
+      ),
+    _react.createElement(
+      TileContentArea,
+      null,
+      description && _react.createElement(TileDescription, null, description),
+      moreOptions && _react.createElement(TileMoreOptions, null, moreOptions),
+      metadata && _react.createElement(TileMetadata, null, metadata),
+      children,
+    ),
+    buttons && _react.createElement(TileButtons, null, buttons),
+  );
 });
 TileComponent.displayName = 'Tile';
 const Tile = Object.assign(TileComponent, {

package/cjs/core/TimePicker/TimePicker.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'TimePicker', {
 });
 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');
@@ -322,87 +321,80 @@ const TimePicker = _react.forwardRef((props, forwardedRef) => {
       secondStep,
     );
   }, [secondStep, selectedTime]);
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    className: (0, _classnames.default)('iui-time-picker', className),
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      useCombinedRenderer
-        ? (0, _jsxruntime.jsx)(TimePickerColumn, {
-            data: time,
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-time-picker', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    useCombinedRenderer
+      ? _react.createElement(TimePickerColumn, {
+          data: time,
+          isSameFocused: (val) =>
+            isSameTime(
+              val,
+              focusedTime,
+              precision,
+              use12Hours ? meridiem : undefined,
+            ),
+          isSameSelected: (val) =>
+            isSameTime(
+              val,
+              selectedTime,
+              precision,
+              use12Hours ? meridiem : undefined,
+            ),
+          onFocusChange: onTimeFocus,
+          onSelectChange: onTimeClick,
+          setFocus: setFocusHour,
+          precision: precision,
+          valueRenderer: combinedRenderer,
+        })
+      : _react.createElement(
+          _react.Fragment,
+          null,
+          _react.createElement(TimePickerColumn, {
+            data: hours,
             isSameFocused: (val) =>
-              isSameTime(
-                val,
-                focusedTime,
-                precision,
-                use12Hours ? meridiem : undefined,
-              ),
+              isSameHour(val, focusedTime, use12Hours ? meridiem : undefined),
             isSameSelected: (val) =>
-              isSameTime(
-                val,
-                selectedTime,
-                precision,
-                use12Hours ? meridiem : undefined,
-              ),
-            onFocusChange: onTimeFocus,
-            onSelectChange: onTimeClick,
+              isSameHour(val, selectedTime, use12Hours ? meridiem : undefined),
+            onFocusChange: onHourFocus,
+            onSelectChange: onHourClick,
             setFocus: setFocusHour,
-            precision: precision,
-            valueRenderer: combinedRenderer,
-          })
-        : (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-            children: [
-              (0, _jsxruntime.jsx)(TimePickerColumn, {
-                data: hours,
-                isSameFocused: (val) =>
-                  isSameHour(
-                    val,
-                    focusedTime,
-                    use12Hours ? meridiem : undefined,
-                  ),
-                isSameSelected: (val) =>
-                  isSameHour(
-                    val,
-                    selectedTime,
-                    use12Hours ? meridiem : undefined,
-                  ),
-                onFocusChange: onHourFocus,
-                onSelectChange: onHourClick,
-                setFocus: setFocusHour,
-                valueRenderer: hourRenderer,
-              }),
-              precision !== 'hours' &&
-                (0, _jsxruntime.jsx)(TimePickerColumn, {
-                  data: minutes,
-                  isSameFocused: (val) => isSameMinute(val, focusedTime),
-                  isSameSelected: (val) => isSameMinute(val, selectedTime),
-                  onFocusChange: (date) => setFocusedTime(date),
-                  onSelectChange: (date) => updateCurrentTime(date),
-                  valueRenderer: minuteRenderer,
-                }),
-              precision === 'seconds' &&
-                (0, _jsxruntime.jsx)(TimePickerColumn, {
-                  data: seconds,
-                  isSameFocused: (val) => isSameSecond(val, focusedTime),
-                  isSameSelected: (val) => isSameSecond(val, selectedTime),
-                  onFocusChange: (date) => setFocusedTime(date),
-                  onSelectChange: (date) => updateCurrentTime(date),
-                  valueRenderer: secondRenderer,
-                }),
-            ],
+            valueRenderer: hourRenderer,
           }),
-      use12Hours &&
-        (0, _jsxruntime.jsx)(TimePickerColumn, {
-          data: ['AM', 'PM'],
-          isSameFocused: (val) => isSameMeridiem(val, focusedTime),
-          isSameSelected: (val) => isSameMeridiem(val, selectedTime),
-          onFocusChange: (date) => onMeridiemFocus(date),
-          onSelectChange: (value) => onMeridiemClick(value),
-          valueRenderer: meridiemRenderer,
-          className: 'iui-period',
-        }),
-    ],
-  });
+          precision !== 'hours' &&
+            _react.createElement(TimePickerColumn, {
+              data: minutes,
+              isSameFocused: (val) => isSameMinute(val, focusedTime),
+              isSameSelected: (val) => isSameMinute(val, selectedTime),
+              onFocusChange: (date) => setFocusedTime(date),
+              onSelectChange: (date) => updateCurrentTime(date),
+              valueRenderer: minuteRenderer,
+            }),
+          precision === 'seconds' &&
+            _react.createElement(TimePickerColumn, {
+              data: seconds,
+              isSameFocused: (val) => isSameSecond(val, focusedTime),
+              isSameSelected: (val) => isSameSecond(val, selectedTime),
+              onFocusChange: (date) => setFocusedTime(date),
+              onSelectChange: (date) => updateCurrentTime(date),
+              valueRenderer: secondRenderer,
+            }),
+        ),
+    use12Hours &&
+      _react.createElement(TimePickerColumn, {
+        data: ['AM', 'PM'],
+        isSameFocused: (val) => isSameMeridiem(val, focusedTime),
+        isSameSelected: (val) => isSameMeridiem(val, selectedTime),
+        onFocusChange: (date) => onMeridiemFocus(date),
+        onSelectChange: (value) => onMeridiemClick(value),
+        valueRenderer: meridiemRenderer,
+        className: 'iui-period',
+      }),
+  );
 });
 const TimePickerColumn = (props) => {
   const {
@@ -452,12 +444,17 @@ const TimePickerColumn = (props) => {
         break;
     }
   };
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: `${className}`,
-    children: (0, _jsxruntime.jsx)('ol', {
-      children: data.map((value, index) => {
+  return _react.createElement(
+    _index.Box,
+    {
+      className: `${className}`,
+    },
+    _react.createElement(
+      'ol',
+      null,
+      data.map((value, index) => {
         const isSameFocus = isSameFocused(value);
-        return (0, _jsxruntime.jsx)(
+        return _react.createElement(
           _index.Box,
           {
             as: 'li',
@@ -473,6 +470,7 @@ const TimePickerColumn = (props) => {
             className: (0, _classnames.default)({
               'iui-selected': isSameSelected(value),
             }),
+            key: index,
             tabIndex: isSameFocus ? 0 : undefined,
             ref: (ref) => {
               if (!ref || !isSameFocus) {
@@ -492,11 +490,10 @@ const TimePickerColumn = (props) => {
             onClick: () => {
               onSelectChange(value);
             },
-            children: valueRenderer(value, precision),
           },
-          index,
+          valueRenderer(value, precision),
         );
       }),
-    }),
-  });
+    ),
+  );
 };

package/cjs/core/Toast/Toast.d.ts

@@ -66,7 +66,7 @@ export type ToastProps = {
  * <Toast type='temporary' content='26 files are available for synchronization.' category='informational' />
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
-export declare const Toast: (props: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: (props: ToastProps) => React.JSX.Element;
 export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove' | 'domProps'> & {
     onClose?: () => void;
     contentProps?: React.ComponentProps<'div'>;