@itwin/itwinui-react 3.12.0 → 3.12.2

package/esm/core/Stepper/Stepper.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 { Box } from '../../utils/index.js';
@@ -26,57 +25,58 @@ export const Stepper = React.forwardRef((props, ref) => {
     Math.max(0, currentStep ?? 0),
     steps.length - 1,
   );
-  return _jsxs(Box, {
-    className: 'iui-stepper',
-    ref: ref,
-    ...rest,
-    children: [
-      _jsx('ol', {
-        children: steps.map((s, index) => {
-          const thisStepProps = stepProps?.(index);
-          const thisTrackContentProps = trackContentProps?.(index);
-          const thisCircleProps = circleProps?.(index);
-          const thisNameProps = nameProps?.(index);
-          return _jsx(
-            StepperStep,
-            {
-              stepProps: thisStepProps,
-              trackContentProps: thisTrackContentProps,
-              circleProps: thisCircleProps,
-              nameProps: thisNameProps,
-              index: index,
-              title: type === 'long' ? '' : s.name,
-              currentStepNumber: boundedCurrentStep,
-              totalSteps: steps.length,
-              type: type,
-              onClick: onStepClick,
-              description: s.description,
-            },
-            index,
-          );
-        }),
+  return React.createElement(
+    Box,
+    {
+      className: 'iui-stepper',
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(
+      'ol',
+      null,
+      steps.map((s, index) => {
+        const thisStepProps = stepProps?.(index);
+        const thisTrackContentProps = trackContentProps?.(index);
+        const thisCircleProps = circleProps?.(index);
+        const thisNameProps = nameProps?.(index);
+        return React.createElement(StepperStep, {
+          stepProps: thisStepProps,
+          trackContentProps: thisTrackContentProps,
+          circleProps: thisCircleProps,
+          nameProps: thisNameProps,
+          key: index,
+          index: index,
+          title: type === 'long' ? '' : s.name,
+          currentStepNumber: boundedCurrentStep,
+          totalSteps: steps.length,
+          type: type,
+          onClick: onStepClick,
+          description: s.description,
+        });
       }),
-      type === 'long' &&
-        _jsxs(Box, {
+    ),
+    type === 'long' &&
+      React.createElement(
+        Box,
+        {
           as: 'div',
           ...labelProps,
           className: cx('iui-stepper-steps-label', labelProps?.className),
-          children: [
-            _jsx(Box, {
-              as: 'span',
-              ...labelCountProps,
-              className: cx(
-                'iui-stepper-steps-label-count',
-                labelCountProps?.className,
-              ),
-              children: localization.stepsCountLabel(
-                boundedCurrentStep + 1,
-                steps.length,
-              ),
-            }),
-            steps[boundedCurrentStep].name,
-          ],
-        }),
-    ],
-  });
+        },
+        React.createElement(
+          Box,
+          {
+            as: 'span',
+            ...labelCountProps,
+            className: cx(
+              'iui-stepper-steps-label-count',
+              labelCountProps?.className,
+            ),
+          },
+          localization.stepsCountLabel(boundedCurrentStep + 1, steps.length),
+        ),
+        steps[boundedCurrentStep].name,
+      ),
+  );
 });

package/esm/core/Stepper/StepperStep.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 { Tooltip } from '../Tooltip/Tooltip.js';
@@ -39,57 +38,70 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
       onCompletedClick();
     }
   };
-  const stepShape = _jsxs(Box, {
-    as: 'li',
-    ...stepProps,
-    className: cx(
-      'iui-stepper-step',
-      {
-        'iui-current': isActive,
-        'iui-clickable': isClickable,
+  const stepShape = React.createElement(
+    Box,
+    {
+      as: 'li',
+      ...stepProps,
+      className: cx(
+        'iui-stepper-step',
+        {
+          'iui-current': isActive,
+          'iui-clickable': isClickable,
+        },
+        className,
+        stepProps?.className,
+      ),
+      style: {
+        inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
+        ...style,
+        ...stepProps?.style,
       },
-      className,
-      stepProps?.className,
-    ),
-    style: {
-      inlineSize: type === 'default' ? `${100 / totalSteps}%` : undefined,
-      ...style,
-      ...stepProps?.style,
+      onClick: onCompletedClick,
+      onKeyDown: onKeyDown,
+      'aria-current': isActive ? 'step' : undefined,
+      tabIndex: isClickable ? 0 : undefined,
+      ref: forwardedRef,
+      ...rest,
     },
-    onClick: onCompletedClick,
-    onKeyDown: onKeyDown,
-    'aria-current': isActive ? 'step' : undefined,
-    tabIndex: isClickable ? 0 : undefined,
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      _jsx(Box, {
+    React.createElement(
+      Box,
+      {
         as: 'div',
         ...trackContentProps,
         className: cx(
           'iui-stepper-track-content',
           trackContentProps?.className,
         ),
-        children: _jsx(Box, {
+      },
+      React.createElement(
+        Box,
+        {
           as: 'span',
           ...circleProps,
           className: cx('iui-stepper-circle', circleProps?.className),
-          children: index + 1,
-        }),
-      }),
-      type === 'default' &&
-        _jsx(Box, {
+        },
+        index + 1,
+      ),
+    ),
+    type === 'default' &&
+      React.createElement(
+        Box,
+        {
           as: 'span',
           ...nameProps,
           className: cx('iui-stepper-step-name', nameProps?.className),
-          children: title,
-        }),
-    ],
-  });
+        },
+        title,
+      ),
+  );
   return description
-    ? _jsx(Tooltip, {
-        content: description,
-        children: stepShape,
-      })
+    ? React.createElement(
+        Tooltip,
+        {
+          content: description,
+        },
+        stepShape,
+      )
     : stepShape;
 });

package/esm/core/Stepper/WorkflowDiagram.js

@@ -1,30 +1,32 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
 export const WorkflowDiagram = React.forwardRef((props, ref) => {
   const { steps, className, contentProps, wrapperProps, ...rest } = props;
-  return _jsx(Box, {
-    as: 'div',
-    ...wrapperProps,
-    ref: ref,
-    children: _jsx(Box, {
-      as: 'ol',
-      className: cx('iui-workflow-diagram', className),
-      ...rest,
-      children: steps.map((s, index) => {
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      ...wrapperProps,
+      ref: ref,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'ol',
+        className: cx('iui-workflow-diagram', className),
+        ...rest,
+      },
+      steps.map((s, index) => {
         const thisContentProps = contentProps?.(index);
-        return _jsx(
-          WorkflowDiagramStep,
-          {
-            contentProps: thisContentProps,
-            title: s.name,
-            description: s.description,
-          },
-          index,
-        );
+        return React.createElement(WorkflowDiagramStep, {
+          contentProps: thisContentProps,
+          key: index,
+          title: s.name,
+          description: s.description,
+        });
       }),
-    }),
-  });
+    ),
+  );
 });

package/esm/core/Stepper/WorkflowDiagramStep.d.ts

@@ -7,4 +7,4 @@ export type WorkflowDiagramStepProps = {
      */
     contentProps?: React.ComponentProps<'span'>;
 } & Pick<StepperStepProps, 'title' | 'description'> & Omit<CommonProps, 'title'>;
-export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => React.JSX.Element;

package/esm/core/Stepper/WorkflowDiagramStep.js

@@ -1,26 +1,34 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../../utils/index.js';
 export const WorkflowDiagramStep = (props) => {
   const { title, description, className, style, contentProps, ...rest } = props;
-  const stepShape = _jsx(Box, {
-    as: 'li',
-    className: cx('iui-workflow-diagram-step', className),
-    style: style,
-    ...rest,
-    children: _jsx(Box, {
-      as: 'span',
-      ...contentProps,
-      className: cx('iui-workflow-diagram-content', contentProps?.className),
-      children: title,
-    }),
-  });
+  const stepShape = React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: cx('iui-workflow-diagram-step', className),
+      style: style,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'span',
+        ...contentProps,
+        className: cx('iui-workflow-diagram-content', contentProps?.className),
+      },
+      title,
+    ),
+  );
   return description
-    ? _jsx(Tooltip, {
-        content: description,
-        children: stepShape,
-      })
+    ? React.createElement(
+        Tooltip,
+        {
+          content: description,
+        },
+        stepShape,
+      )
     : stepShape;
 };

package/esm/core/Surface/Surface.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { useSafeContext, supportsHas, Box } from '../../utils/index.js';
@@ -37,12 +36,15 @@ const SurfaceHeader = React.forwardRef((props, ref) => {
       setHasLayout(true);
     }
   }, [setHasLayout]);
-  return _jsx(Box, {
-    className: cx('iui-surface-header', className),
-    ref: ref,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-surface-header', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 const SurfaceBody = React.forwardRef((props, ref) => {
   const { children, className, isPadded, ...rest } = props;
@@ -52,13 +54,16 @@ const SurfaceBody = React.forwardRef((props, ref) => {
       setHasLayout(true);
     }
   }, [setHasLayout]);
-  return _jsx(Box, {
-    className: cx('iui-surface-body', className),
-    ref: ref,
-    'data-iui-padded': isPadded ? 'true' : undefined,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-surface-body', className),
+      ref: ref,
+      'data-iui-padded': isPadded ? 'true' : undefined,
+      ...rest,
+    },
+    children,
+  );
 });
 export const Surface = Object.assign(
   React.forwardRef((props, ref) => {
@@ -76,19 +81,25 @@ export const Surface = Object.assign(
       '--iui-surface-border': getBorderValue(border),
       ...style,
     };
-    return _jsx(Box, {
-      className: cx('iui-surface', className),
-      style: _style,
-      ref: ref,
-      'data-iui-layout': hasLayout ? 'true' : undefined,
-      ...rest,
-      children: _jsx(SurfaceContext.Provider, {
-        value: {
-          setHasLayout,
+    return React.createElement(
+      Box,
+      {
+        className: cx('iui-surface', className),
+        style: _style,
+        ref: ref,
+        'data-iui-layout': hasLayout ? 'true' : undefined,
+        ...rest,
+      },
+      React.createElement(
+        SurfaceContext.Provider,
+        {
+          value: {
+            setHasLayout,
+          },
         },
-        children: children,
-      }),
-    });
+        children,
+      ),
+    );
   }),
   {
     Header: SurfaceHeader,

package/esm/core/Table/SubRowExpander.d.ts

@@ -8,4 +8,4 @@ export type SubRowExpanderProps<T extends Record<string, unknown>> = {
     density?: 'default' | 'condensed' | 'extra-condensed';
     [k: string]: unknown;
 };
-export declare const SubRowExpander: <T extends Record<string, unknown>>(props: SubRowExpanderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SubRowExpander: <T extends Record<string, unknown>>(props: SubRowExpanderProps<T>) => React.JSX.Element;

package/esm/core/Table/SubRowExpander.js

@@ -1,33 +1,37 @@
-import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { SvgChevronRight } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 export const SubRowExpander = (props) => {
   const { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
-  return _jsx(_Fragment, {
-    children: expanderCell
+  return React.createElement(
+    React.Fragment,
+    null,
+    expanderCell
       ? expanderCell(cellProps)
-      : _jsx(IconButton, {
-          'aria-label': 'Toggle sub row',
-          'aria-expanded': cell.row.isExpanded ? 'true' : 'false',
-          style: {
-            marginInlineEnd:
-              density === 'default' || density === undefined ? 8 : 4,
-          },
-          className: 'iui-table-row-expander',
-          styleType: 'borderless',
-          size: 'small',
-          onClick: (e) => {
-            e.stopPropagation();
-            cell.row.toggleRowExpanded();
+      : React.createElement(
+          IconButton,
+          {
+            'aria-label': 'Toggle sub row',
+            'aria-expanded': cell.row.isExpanded ? 'true' : 'false',
+            style: {
+              marginInlineEnd:
+                density === 'default' || density === undefined ? 8 : 4,
+            },
+            className: 'iui-table-row-expander',
+            styleType: 'borderless',
+            size: 'small',
+            onClick: (e) => {
+              e.stopPropagation();
+              cell.row.toggleRowExpanded();
+            },
+            disabled: isDisabled,
+            ...rest,
           },
-          disabled: isDisabled,
-          ...rest,
-          children: _jsx(SvgChevronRight, {
+          React.createElement(SvgChevronRight, {
             style: {
               transform: cell.row.isExpanded ? 'rotate(90deg)' : undefined,
             },
           }),
-        }),
-  });
+        ),
+  );
 };