@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/SideNavigation/SideNavigation.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 {
@@ -26,25 +25,35 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const [isExpanded, setIsExpanded] = useControlledState(false, isExpandedProp);
-  const ExpandButton = _jsx(IconButton, {
-    label: 'Toggle icon labels',
-    'aria-expanded': isExpanded,
-    className: 'iui-sidenav-button iui-expand',
-    size: 'small',
-    onClick: React.useCallback(() => {
-      setIsExpanded((expanded) => !expanded);
-      onExpanderClick?.();
-    }, [onExpanderClick, setIsExpanded]),
-    children: _jsx(SvgChevronRight, {}),
-  });
-  return _jsx(SidenavExpandedContext.Provider, {
-    value: isExpanded,
-    children: _jsxs(Box, {
-      ...wrapperProps,
-      className: cx('iui-side-navigation-wrapper', wrapperProps?.className),
-      ref: forwardedRef,
-      children: [
-        _jsxs(Box, {
+  const ExpandButton = React.createElement(
+    IconButton,
+    {
+      label: 'Toggle icon labels',
+      'aria-expanded': isExpanded,
+      className: 'iui-sidenav-button iui-expand',
+      size: 'small',
+      onClick: React.useCallback(() => {
+        setIsExpanded((expanded) => !expanded);
+        onExpanderClick?.();
+      }, [onExpanderClick, setIsExpanded]),
+    },
+    React.createElement(SvgChevronRight, null),
+  );
+  return React.createElement(
+    SidenavExpandedContext.Provider,
+    {
+      value: isExpanded,
+    },
+    React.createElement(
+      Box,
+      {
+        ...wrapperProps,
+        className: cx('iui-side-navigation-wrapper', wrapperProps?.className),
+        ref: forwardedRef,
+      },
+      React.createElement(
+        Box,
+        {
           as: 'div',
           className: cx(
             'iui-side-navigation',
@@ -55,39 +64,47 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
             className,
           ),
           ...rest,
-          children: [
-            expanderPlacement === 'top' && ExpandButton,
-            _jsxs(Box, {
+        },
+        expanderPlacement === 'top' && ExpandButton,
+        React.createElement(
+          Box,
+          {
+            as: 'div',
+            ...contentProps,
+            className: cx('iui-sidenav-content', contentProps?.className),
+          },
+          React.createElement(
+            Box,
+            {
               as: 'div',
-              ...contentProps,
-              className: cx('iui-sidenav-content', contentProps?.className),
-              children: [
-                _jsx(Box, {
-                  as: 'div',
-                  ...topProps,
-                  className: cx('iui-top', topProps?.className),
-                  children: items,
-                }),
-                _jsx(Box, {
-                  as: 'div',
-                  ...bottomProps,
-                  className: cx('iui-bottom', bottomProps?.className),
-                  children: secondaryItems,
-                }),
-              ],
-            }),
-            expanderPlacement === 'bottom' && ExpandButton,
-          ],
-        }),
-        submenu &&
-          _jsx(WithCSSTransition, {
+              ...topProps,
+              className: cx('iui-top', topProps?.className),
+            },
+            items,
+          ),
+          React.createElement(
+            Box,
+            {
+              as: 'div',
+              ...bottomProps,
+              className: cx('iui-bottom', bottomProps?.className),
+            },
+            secondaryItems,
+          ),
+        ),
+        expanderPlacement === 'bottom' && ExpandButton,
+      ),
+      submenu &&
+        React.createElement(
+          WithCSSTransition,
+          {
             in: isSubmenuOpen,
             dimension: 'width',
             timeout: 200,
             classNames: 'iui',
-            children: submenu,
-          }),
-      ],
-    }),
-  });
+          },
+          submenu,
+        ),
+    ),
+  );
 });

package/esm/core/SideNavigation/SidenavButton.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Button } from '../Buttons/Button.js';
@@ -14,27 +13,33 @@ export const SidenavButton = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const isExpanded = React.useContext(SidenavExpandedContext) === true;
-  const sidenavButton = _jsx(Button, {
-    className: cx(
-      'iui-sidenav-button',
-      {
-        'iui-submenu-open': isSubmenuOpen,
-      },
-      className,
-    ),
-    'data-iui-active': isActive,
-    size: 'large',
-    disabled: disabled,
-    ref: ref,
-    ...rest,
-    children: children,
-  });
+  const sidenavButton = React.createElement(
+    Button,
+    {
+      className: cx(
+        'iui-sidenav-button',
+        {
+          'iui-submenu-open': isSubmenuOpen,
+        },
+        className,
+      ),
+      'data-iui-active': isActive,
+      size: 'large',
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
   return !isExpanded
-    ? _jsx(Tooltip, {
-        content: children,
-        placement: 'right',
-        ariaStrategy: 'none',
-        children: sidenavButton,
-      })
+    ? React.createElement(
+        Tooltip,
+        {
+          content: children,
+          placement: 'right',
+          ariaStrategy: 'none',
+        },
+        sidenavButton,
+      )
     : sidenavButton;
 });

package/esm/core/SideNavigation/SidenavSubmenu.js

@@ -1,16 +1,21 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 export const SidenavSubmenu = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
-  return _jsx(Box, {
-    className: cx('iui-side-navigation-submenu', className),
-    ref: ref,
-    ...rest,
-    children: _jsx(Box, {
-      className: 'iui-side-navigation-submenu-content',
-      children: children,
-    }),
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-side-navigation-submenu', className),
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: 'iui-side-navigation-submenu-content',
+      },
+      children,
+    ),
+  );
 });

package/esm/core/SideNavigation/SidenavSubmenuHeader.js

@@ -1,23 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 export const SidenavSubmenuHeader = React.forwardRef((props, forwardedRef) => {
   const { children, actions, className, ...rest } = props;
-  return _jsxs(Box, {
-    className: cx('iui-side-navigation-submenu-header', className),
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-side-navigation-submenu-header', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
         className: 'iui-side-navigation-submenu-header-label',
-        children: children,
-      }),
-      actions &&
-        _jsx(Box, {
+      },
+      children,
+    ),
+    actions &&
+      React.createElement(
+        Box,
+        {
           className: 'iui-side-navigation-submenu-header-actions',
-          children: actions,
-        }),
-    ],
-  });
+        },
+        actions,
+      ),
+  );
 });

package/esm/core/SkipToContentLink/SkipToContentLink.js

@@ -1,14 +1,16 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 export const SkipToContentLink = React.forwardRef((props, ref) => {
   const { children = 'Skip to main content', className, ...rest } = props;
-  return _jsx(Box, {
-    as: 'a',
-    ref: ref,
-    className: cx('iui-skip-to-content-link', className),
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      as: 'a',
+      ref: ref,
+      className: cx('iui-skip-to-content-link', className),
+      ...rest,
+    },
+    children,
+  );
 });

package/esm/core/Slider/Slider.js

@@ -1,5 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
-import { createElement as _createElement } from 'react';
 import cx from 'classnames';
 import * as React from 'react';
 import { getBoundedValue, useEventListener, Box } from '../../utils/index.js';
@@ -252,12 +250,15 @@ export const Slider = React.forwardRef((props, ref) => {
       return null;
     }
     if (Array.isArray(tickLabels)) {
-      return _jsx(Box, {
-        as: 'div',
-        ...ticksProps,
-        className: cx('iui-slider-ticks', ticksProps?.className),
-        children: tickLabels.map((label, index) =>
-          _createElement(
+      return React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...ticksProps,
+          className: cx('iui-slider-ticks', ticksProps?.className),
+        },
+        tickLabels.map((label, index) =>
+          React.createElement(
             Box,
             {
               as: 'span',
@@ -268,7 +269,7 @@ export const Slider = React.forwardRef((props, ref) => {
             label,
           ),
         ),
-      });
+      );
     }
     return tickLabels;
   }, [tickLabels, tickProps, ticksProps]);
@@ -284,21 +285,28 @@ export const Slider = React.forwardRef((props, ref) => {
     },
     [getNumDecimalPlaces, step, tooltipProps],
   );
-  return _jsxs(Box, {
-    ref: ref,
-    className: cx('iui-slider-container', className),
-    'data-iui-orientation': orientation,
-    'data-iui-disabled': disabled ? 'true' : undefined,
-    ...rest,
-    children: [
-      minValueLabel &&
-        _jsx(Box, {
+  return React.createElement(
+    Box,
+    {
+      ref: ref,
+      className: cx('iui-slider-container', className),
+      'data-iui-orientation': orientation,
+      'data-iui-disabled': disabled ? 'true' : undefined,
+      ...rest,
+    },
+    minValueLabel &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           ...minProps,
           className: cx('iui-slider-min', minProps?.className),
-          children: minValueLabel,
-        }),
-      _jsxs(Box, {
+        },
+        minValueLabel,
+      ),
+    React.createElement(
+      Box,
+      {
         ref: containerRef,
         ...trackContainerProps,
         className: cx(
@@ -309,48 +317,46 @@ export const Slider = React.forwardRef((props, ref) => {
           trackContainerProps?.className,
         ),
         onPointerDown: handlePointerDownOnSlider,
-        children: [
-          currentValues.map((thumbValue, index) => {
-            const [minVal, maxVal] = getAllowableThumbRange(index);
-            const thisThumbProps = thumbProps?.(index);
-            return _jsx(
-              Thumb,
-              {
-                index: index,
-                disabled: disabled,
-                isActive: activeThumbIndex === index,
-                onThumbActivated: onThumbActivated,
-                onThumbValueChanged: onThumbValueChanged,
-                minVal: minVal,
-                maxVal: maxVal,
-                value: thumbValue,
-                tooltipProps: generateTooltipProps(index, thumbValue),
-                thumbProps: thisThumbProps,
-                step: step,
-                sliderMin: min,
-                sliderMax: max,
-              },
-              thisThumbProps?.id ?? index,
-            );
-          }),
-          _jsx(Track, {
-            trackDisplayMode: trackDisplay,
-            sliderMin: min,
-            sliderMax: max,
-            values: currentValues,
-            orientation: orientation,
-            ...trackProps,
-          }),
-        ],
+      },
+      currentValues.map((thumbValue, index) => {
+        const [minVal, maxVal] = getAllowableThumbRange(index);
+        const thisThumbProps = thumbProps?.(index);
+        return React.createElement(Thumb, {
+          key: thisThumbProps?.id ?? index,
+          index: index,
+          disabled: disabled,
+          isActive: activeThumbIndex === index,
+          onThumbActivated: onThumbActivated,
+          onThumbValueChanged: onThumbValueChanged,
+          minVal: minVal,
+          maxVal: maxVal,
+          value: thumbValue,
+          tooltipProps: generateTooltipProps(index, thumbValue),
+          thumbProps: thisThumbProps,
+          step: step,
+          sliderMin: min,
+          sliderMax: max,
+        });
+      }),
+      React.createElement(Track, {
+        trackDisplayMode: trackDisplay,
+        sliderMin: min,
+        sliderMax: max,
+        values: currentValues,
+        orientation: orientation,
+        ...trackProps,
       }),
-      tickMarkArea,
-      maxValueLabel &&
-        _jsx(Box, {
+    ),
+    tickMarkArea,
+    maxValueLabel &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           ...maxProps,
           className: cx('iui-slider-max', maxProps?.className),
-          children: maxValueLabel,
-        }),
-    ],
-  });
+        },
+        maxValueLabel,
+      ),
+  );
 });

package/esm/core/Slider/Thumb.d.ts

@@ -59,5 +59,5 @@ type ThumbProps = {
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
-export declare const Thumb: (props: ThumbProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Thumb: (props: ThumbProps) => React.JSX.Element;
 export {};

package/esm/core/Slider/Thumb.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Tooltip } from '../Tooltip/Tooltip.js';
@@ -74,14 +73,17 @@ export const Thumb = (props) => {
     return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
   }, [adjustedValue, sliderMax, sliderMin]);
   const { style, className, ...rest } = thumbProps || {};
-  return _jsx(Tooltip, {
-    placement: 'top',
-    autoUpdateOptions: {
-      animationFrame: true,
+  return React.createElement(
+    Tooltip,
+    {
+      placement: 'top',
+      autoUpdateOptions: {
+        animationFrame: true,
+      },
+      ariaStrategy: 'none',
+      ...tooltipProps,
     },
-    ariaStrategy: 'none',
-    ...tooltipProps,
-    children: _jsx(Box, {
+    React.createElement(Box, {
       ...rest,
       ref: useMergedRefs(thumbRef, thumbProps?.ref),
       style: {
@@ -105,5 +107,5 @@ export const Thumb = (props) => {
       onKeyDown: (event) => handleOnKeyboardEvent(event, false),
       onKeyUp: (event) => handleOnKeyboardEvent(event, true),
     }),
-  });
+  );
 };

package/esm/core/Slider/Track.d.ts

@@ -11,4 +11,4 @@ export type TrackProps = {
  * Track displays color segments above Rail. Which, if any, segments that are
  * colorized is based on `trackDisplayMode`.
  */
-export declare const Track: (props: TrackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Track: (props: TrackProps) => React.JSX.Element;

package/esm/core/Slider/Track.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 { Box } from '../../utils/index.js';
@@ -51,9 +50,10 @@ export const Track = (props) => {
   React.useEffect(() => {
     setSegments(generateSegments(values, sliderMin, sliderMax));
   }, [values, sliderMin, sliderMax]);
-  return _jsx(_Fragment, {
-    children:
-      'none' !== trackDisplayMode &&
+  return React.createElement(
+    React.Fragment,
+    null,
+    'none' !== trackDisplayMode &&
       segments.map((segment, index) => {
         const lowPercent =
           segment.left >= sliderMin && sliderMax !== sliderMin
@@ -64,28 +64,28 @@ export const Track = (props) => {
             ? 100.0 -
               (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
             : 100;
-        return _jsx(
+        return React.createElement(
           React.Fragment,
           {
-            children: shouldDisplaySegment(index, trackDisplayMode)
-              ? _jsx(Box, {
-                  className: cx('iui-slider-track', className),
-                  style: {
-                    ...(orientation === 'horizontal'
-                      ? {
-                          insetInlineStart: `${lowPercent}%`,
-                          insetInlineEnd: `${highPercent}%`,
-                        }
-                      : {
-                          insetBlockStart: `${highPercent}%`,
-                          insetBlockEnd: `${lowPercent}%`,
-                        }),
-                  },
-                })
-              : null,
+            key: index,
           },
-          index,
+          shouldDisplaySegment(index, trackDisplayMode)
+            ? React.createElement(Box, {
+                className: cx('iui-slider-track', className),
+                style: {
+                  ...(orientation === 'horizontal'
+                    ? {
+                        insetInlineStart: `${lowPercent}%`,
+                        insetInlineEnd: `${highPercent}%`,
+                      }
+                    : {
+                        insetBlockStart: `${highPercent}%`,
+                        insetBlockEnd: `${lowPercent}%`,
+                      }),
+                },
+              })
+            : null,
         );
       }),
-  });
+  );
 };

package/esm/core/StatusMessage/StatusMessage.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box, StatusIconMap } from '../../utils/index.js';
 import cx from 'classnames';
@@ -15,23 +14,24 @@ export const StatusMessage = React.forwardRef((props, ref) => {
   } = props;
   const icon = userStartIcon ?? (status && StatusIconMap[status]());
   const shouldShowIcon = userStartIcon !== null && !!icon;
-  return _jsxs(Box, {
-    className: cx('iui-status-message', className),
-    'data-iui-status': status,
-    ref: ref,
-    ...rest,
-    children: [
-      shouldShowIcon
-        ? _jsx(Icon, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-status-message', className),
+      'data-iui-status': status,
+      ref: ref,
+      ...rest,
+    },
+    shouldShowIcon
+      ? React.createElement(
+          Icon,
+          {
             'aria-hidden': true,
             ...iconProps,
-            children: icon,
-          })
-        : null,
-      _jsx(Box, {
-        ...contentProps,
-        children: children,
-      }),
-    ],
-  });
+          },
+          icon,
+        )
+      : null,
+    React.createElement(Box, contentProps, children),
+  );
 });