@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/TimePicker/TimePicker.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 { Box } from '../../utils/index.js';
@@ -314,87 +309,80 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
       secondStep,
     );
   }, [secondStep, selectedTime]);
-  return _jsxs(Box, {
-    className: cx('iui-time-picker', className),
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      useCombinedRenderer
-        ? _jsx(TimePickerColumn, {
-            data: time,
+  return React.createElement(
+    Box,
+    {
+      className: cx('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,
-          })
-        : _jsxs(_Fragment, {
-            children: [
-              _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' &&
-                _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' &&
-                _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 &&
-        _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 {
@@ -444,12 +432,17 @@ const TimePickerColumn = (props) => {
         break;
     }
   };
-  return _jsx(Box, {
-    className: `${className}`,
-    children: _jsx('ol', {
-      children: data.map((value, index) => {
+  return React.createElement(
+    Box,
+    {
+      className: `${className}`,
+    },
+    React.createElement(
+      'ol',
+      null,
+      data.map((value, index) => {
         const isSameFocus = isSameFocused(value);
-        return _jsx(
+        return React.createElement(
           Box,
           {
             as: 'li',
@@ -465,6 +458,7 @@ const TimePickerColumn = (props) => {
             className: cx({
               'iui-selected': isSameSelected(value),
             }),
+            key: index,
             tabIndex: isSameFocus ? 0 : undefined,
             ref: (ref) => {
               if (!ref || !isSameFocus) {
@@ -484,11 +478,10 @@ const TimePickerColumn = (props) => {
             onClick: () => {
               onSelectChange(value);
             },
-            children: valueRenderer(value, precision),
           },
-          index,
+          valueRenderer(value, precision),
         );
       }),
-    }),
-  });
+    ),
+  );
 };

package/esm/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'>;

package/esm/core/Toast/Toast.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Transition } from 'react-transition-group';
 import cx from 'classnames';
@@ -95,47 +94,56 @@ export const Toast = (props) => {
       translateY,
     };
   };
-  return _jsx(Transition, {
-    timeout: {
-      enter: 240,
-      exit: animateOutTo ? 400 : 120,
-    },
-    in: isVisible,
-    appear: true,
-    unmountOnExit: true,
-    onEnter: (node) => {
-      if (isMotionOk()) {
-        node.style.transform = 'translateY(15%)';
-        node.style.transitionTimingFunction = 'ease';
-      }
-    },
-    onEntered: (node) => {
-      if (isMotionOk()) {
-        node.style.transform = 'translateY(0)';
-      }
-    },
-    onExiting: (node) => {
-      if (isMotionOk()) {
-        const { translateX, translateY } = calculateOutAnimation(node);
-        node.style.transform = animateOutTo
-          ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-          : `scale(0.9)`;
-        node.style.opacity = '0';
-        node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
-        node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
-      }
+  return React.createElement(
+    Transition,
+    {
+      timeout: {
+        enter: 240,
+        exit: animateOutTo ? 400 : 120,
+      },
+      in: isVisible,
+      appear: true,
+      unmountOnExit: true,
+      onEnter: (node) => {
+        if (isMotionOk()) {
+          node.style.transform = 'translateY(15%)';
+          node.style.transitionTimingFunction = 'ease';
+        }
+      },
+      onEntered: (node) => {
+        if (isMotionOk()) {
+          node.style.transform = 'translateY(0)';
+        }
+      },
+      onExiting: (node) => {
+        if (isMotionOk()) {
+          const { translateX, translateY } = calculateOutAnimation(node);
+          node.style.transform = animateOutTo
+            ? `scale(0.9) translate(${translateX}px,${translateY}px)`
+            : `scale(0.9)`;
+          node.style.opacity = '0';
+          node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
+          node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+        }
+      },
+      onExited: onRemove,
     },
-    onExited: onRemove,
-    children: _jsx(Box, {
-      ref: thisElement,
-      className: 'iui-toast-all',
-      style: {
-        height,
-        ...marginStyle(),
+    React.createElement(
+      Box,
+      {
+        ref: thisElement,
+        className: 'iui-toast-all',
+        style: {
+          height,
+          ...marginStyle(),
+        },
       },
-      children: _jsx('div', {
-        ref: onRef,
-        children: _jsx(ToastPresentation, {
+      React.createElement(
+        'div',
+        {
+          ref: onRef,
+        },
+        React.createElement(ToastPresentation, {
           as: 'div',
           category: category,
           content: content,
@@ -146,9 +154,9 @@ export const Toast = (props) => {
           ...domProps?.toastProps,
           contentProps: domProps?.contentProps,
         }),
-      }),
-    }),
-  });
+      ),
+    ),
+  );
 };
 export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
   const {
@@ -163,40 +171,53 @@ export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const StatusIcon = StatusIconMap[category];
-  return _jsxs(Box, {
-    className: cx(`iui-toast iui-${category}`, className),
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      className: cx(`iui-toast iui-${category}`, className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
         className: 'iui-status-area',
-        children: _jsx(StatusIcon, {
-          className: 'iui-icon',
-        }),
+      },
+      React.createElement(StatusIcon, {
+        className: 'iui-icon',
       }),
-      _jsx(Box, {
+    ),
+    React.createElement(
+      Box,
+      {
         as: 'div',
         ...contentProps,
         className: cx('iui-message', contentProps?.className),
-        children: content,
-      }),
-      link &&
-        _jsx(ButtonBase, {
+      },
+      content,
+    ),
+    link &&
+      React.createElement(
+        ButtonBase,
+        {
           ...link,
           className: cx('iui-anchor', 'iui-toast-anchor', link.className),
           title: undefined,
           'data-iui-status': category,
           'data-iui-underline': true,
-          children: link.title,
-        }),
-      (type === 'persisting' || hasCloseButton) &&
-        _jsx(IconButton, {
+        },
+        link.title,
+      ),
+    (type === 'persisting' || hasCloseButton) &&
+      React.createElement(
+        IconButton,
+        {
           size: 'small',
           styleType: 'borderless',
           onClick: onClose,
           'aria-label': 'Close',
-          children: _jsx(SvgCloseSmall, {}),
-        }),
-    ],
-  });
+        },
+        React.createElement(SvgCloseSmall, null),
+      ),
+  );
 });

package/esm/core/Toast/Toaster.d.ts

@@ -34,10 +34,10 @@ export declare const useToaster: () => {
     closeAll: () => void;
     setSettings: (settings: Partial<ToasterSettings>) => void;
 };
-export declare const Toaster: () => import("react/jsx-runtime").JSX.Element;
+export declare const Toaster: () => React.JSX.Element;
 export declare const ToastProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const ToasterStateContext: React.Context<ToasterState | undefined>;
 type ToasterState = {
     toasts: ToastProps[];

package/esm/core/Toast/Toaster.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, useSafeContext } from '../../utils/index.js';
@@ -46,18 +45,18 @@ export const useToaster = () => {
 };
 export const Toaster = () => {
   const { toasts, settings } = useSafeContext(ToasterStateContext);
-  return _jsx(Box, {
-    className: cx(`iui-toast-wrapper`, `iui-placement-${settings.placement}`),
-    children: toasts.map((toastProps) => {
-      return _jsx(
-        Toast,
-        {
-          ...toastProps,
-        },
-        toastProps.id,
-      );
+  return React.createElement(
+    Box,
+    {
+      className: cx(`iui-toast-wrapper`, `iui-placement-${settings.placement}`),
+    },
+    toasts.map((toastProps) => {
+      return React.createElement(Toast, {
+        key: toastProps.id,
+        ...toastProps,
+      });
     }),
-  });
+  );
 };
 export const ToastProvider = ({ children }) => {
   const [toasterState, dispatch] = React.useReducer(toastReducer, {
@@ -67,13 +66,19 @@ export const ToastProvider = ({ children }) => {
       placement: 'top',
     },
   });
-  return _jsx(ToasterDispatchContext.Provider, {
-    value: dispatch,
-    children: _jsx(ToasterStateContext.Provider, {
-      value: toasterState,
-      children: children,
-    }),
-  });
+  return React.createElement(
+    ToasterDispatchContext.Provider,
+    {
+      value: dispatch,
+    },
+    React.createElement(
+      ToasterStateContext.Provider,
+      {
+        value: toasterState,
+      },
+      children,
+    ),
+  );
 };
 const toastReducer = (state, action) => {
   if (action.type === 'add') {

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, SvgCheckmark } from '../../utils/index.js';
@@ -16,43 +15,50 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
   } = props;
   const shouldShowIcon =
     iconProp === undefined || (iconProp !== null && size !== 'small');
-  return _jsxs(Box, {
-    as: label ? 'label' : 'div',
-    className: cx(
-      'iui-toggle-switch-wrapper',
-      {
-        'iui-disabled': disabled,
-        'iui-label-on-right': label && labelPosition === 'right',
-        'iui-label-on-left': label && labelPosition === 'left',
-      },
-      className,
-    ),
-    'data-iui-size': size,
-    style: style,
-    children: [
-      _jsx(Box, {
-        as: 'input',
-        className: 'iui-toggle-switch',
-        type: 'checkbox',
-        role: 'switch',
-        disabled: disabled,
-        ref: ref,
-        ...rest,
-      }),
-      shouldShowIcon &&
-        _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      as: label ? 'label' : 'div',
+      className: cx(
+        'iui-toggle-switch-wrapper',
+        {
+          'iui-disabled': disabled,
+          'iui-label-on-right': label && labelPosition === 'right',
+          'iui-label-on-left': label && labelPosition === 'left',
+        },
+        className,
+      ),
+      'data-iui-size': size,
+      style: style,
+    },
+    React.createElement(Box, {
+      as: 'input',
+      className: 'iui-toggle-switch',
+      type: 'checkbox',
+      role: 'switch',
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    }),
+    shouldShowIcon &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           className: 'iui-toggle-switch-icon',
           'aria-hidden': true,
-          children: iconProp || _jsx(SvgCheckmark, {}),
-        }),
-      label &&
-        _jsx(Box, {
+        },
+        iconProp || React.createElement(SvgCheckmark, null),
+      ),
+    label &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           ...labelProps,
           className: cx('iui-toggle-switch-label', labelProps?.className),
-          children: label,
-        }),
-    ],
-  });
+        },
+        label,
+      ),
+  );
 });

package/esm/core/Tooltip/Tooltip.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 {
@@ -204,16 +199,22 @@ export const Tooltip = React.forwardRef((props, forwardedRef) => {
   const { content, children, portal = true, className, style, ...rest } = props;
   const tooltip = useTooltip(rest);
   const refs = useMergedRefs(tooltip.refs.setFloating, forwardedRef);
-  return _jsxs(_Fragment, {
-    children: [
-      cloneElementWithRef(children, (children) => ({
-        ...tooltip.getReferenceProps(children.props),
-        ref: tooltip.refs.setReference,
-      })),
-      props.ariaStrategy !== 'none' || tooltip.context.open
-        ? _jsx(Portal, {
+  return React.createElement(
+    React.Fragment,
+    null,
+    cloneElementWithRef(children, (children) => ({
+      ...tooltip.getReferenceProps(children.props),
+      ref: tooltip.refs.setReference,
+    })),
+    props.ariaStrategy !== 'none' || tooltip.context.open
+      ? React.createElement(
+          Portal,
+          {
             portal: portal,
-            children: _jsx(Box, {
+          },
+          React.createElement(
+            Box,
+            {
               className: cx('iui-tooltip', className),
               ref: refs,
               style: {
@@ -221,10 +222,10 @@ export const Tooltip = React.forwardRef((props, forwardedRef) => {
                 ...style,
               },
               ...tooltip.floatingProps,
-              children: content,
-            }),
-          })
-        : null,
-    ],
-  });
+            },
+            content,
+          ),
+        )
+      : null,
+  );
 });