@itwin/itwinui-react 3.12.0 → 3.12.1

package/esm/utils/components/InputContainer.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 } from './Box.js';
@@ -21,32 +20,39 @@ export const InputContainer = React.forwardRef((props, forwardedRef) => {
     labelId,
     ...rest
   } = props;
-  return _jsxs(Box, {
-    className: cx('iui-input-grid', className),
-    'data-iui-status': status,
-    'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
-    style: style,
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      label &&
-        _jsx(Label, {
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-input-grid', className),
+      'data-iui-status': status,
+      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
+      style: style,
+      ref: forwardedRef,
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        Label,
+        {
           as: inputId && props.as !== 'label' ? 'label' : 'div',
           required: required,
           disabled: disabled,
           htmlFor: inputId,
           id: labelId,
-          children: label,
-        }),
-      children,
-      statusMessage
-        ? statusMessage
-        : message &&
-          _jsx(StatusMessage, {
-            startIcon: icon,
-            status: status,
-            children: message,
-          }),
-    ],
-  });
+        },
+        label,
+      ),
+    children,
+    statusMessage
+      ? statusMessage
+      : message &&
+          React.createElement(
+            StatusMessage,
+            {
+              startIcon: icon,
+              status: status,
+            },
+            message,
+          ),
+  );
 });

package/esm/utils/components/InputFlexContainer.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
@@ -7,20 +6,23 @@ import { IconButton } from '../../core/Buttons/IconButton.js';
 export const InputFlexContainer = React.forwardRef((props, ref) => {
   const { isDisabled, status, children, className, size, style, ...rest } =
     props;
-  return _jsx(Box, {
-    className: cx('iui-input-flex-container', className),
-    'data-iui-status': status,
-    'data-iui-size': size,
-    'data-iui-disabled': isDisabled ? 'true' : undefined,
-    ref: ref,
-    style: style,
-    ...rest,
-    children: children,
-  });
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-input-flex-container', className),
+      'data-iui-status': status,
+      'data-iui-size': size,
+      'data-iui-disabled': isDisabled ? 'true' : undefined,
+      ref: ref,
+      style: style,
+      ...rest,
+    },
+    children,
+  );
 });
 export const InputFlexContainerButton = React.forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return _jsx(IconButton, {
+  return React.createElement(IconButton, {
     ref: ref,
     className: cx('iui-input-flex-container-icon', className),
     styleType: 'borderless',
@@ -29,7 +31,7 @@ export const InputFlexContainerButton = React.forwardRef((props, ref) => {
 });
 export const InputFlexContainerIcon = React.forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return _jsx(Icon, {
+  return React.createElement(Icon, {
     ref: ref,
     className: cx('iui-input-flex-container-icon', className),
     padded: true,

package/esm/utils/components/LineClamp.js

@@ -1,24 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box } from './Box.js';
 import { ShadowRoot } from './ShadowRoot.js';
 export const LineClamp = React.forwardRef((props, forwardedRef) => {
   const { lines, children, ...rest } = props;
-  return _jsxs(Box, {
-    ref: forwardedRef,
-    ...rest,
-    style: {
-      '--_iui-line-clamp': lines,
-      ...props.style,
+  return React.createElement(
+    Box,
+    {
+      ref: forwardedRef,
+      ...rest,
+      style: {
+        '--_iui-line-clamp': lines,
+        ...props.style,
+      },
     },
-    children: [
-      _jsx(ShadowRoot, {
+    React.createElement(
+      ShadowRoot,
+      {
         css: css,
-        children: _jsx('slot', {}),
-      }),
-      children,
-    ],
-  });
+      },
+      React.createElement('slot', null),
+    ),
+    children,
+  );
 });
 const css = `
   :host {

package/esm/utils/components/MiddleTextTruncation.d.ts

@@ -31,4 +31,4 @@ export type MiddleTextTruncationProps = {
  *   )}
  * />
  */
-export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;

package/esm/utils/components/MiddleTextTruncation.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useOverflow } from '../hooks/useOverflow.js';
 const ELLIPSIS_CHAR = '…';
@@ -15,16 +14,19 @@ export const MiddleTextTruncation = (props) => {
       return text;
     }
   }, [endCharsCount, text, visibleCount]);
-  return _jsx('span', {
-    style: {
-      display: 'flex',
-      minWidth: 0,
-      flexGrow: 1,
-      whiteSpace: 'nowrap',
-      ...style,
+  return React.createElement(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        minWidth: 0,
+        flexGrow: 1,
+        whiteSpace: 'nowrap',
+        ...style,
+      },
+      ref: ref,
+      ...rest,
     },
-    ref: ref,
-    ...rest,
-    children: textRenderer?.(truncatedText, text) ?? truncatedText,
-  });
+    textRenderer?.(truncatedText, text) ?? truncatedText,
+  );
 };

package/esm/utils/components/Resizer.d.ts

@@ -34,4 +34,4 @@ export type ResizerProps = {
  *   </div>
  * );
  */
-export declare const Resizer: (props: ResizerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Resizer: (props: ResizerProps) => React.JSX.Element;

package/esm/utils/components/Resizer.js

@@ -1,28 +1,22 @@
-import {
-  jsx as _jsx,
-  jsxs as _jsxs,
-  Fragment as _Fragment,
-} from 'react/jsx-runtime';
 import * as React from 'react';
 import {
   getBoundedValue,
   getTranslateValuesFromElement,
 } from '../functions/index.js';
 export const Resizer = (props) => {
-  return _jsxs('div', {
-    style: {
-      position: 'absolute',
-      inset: -6,
-      display: 'grid',
-      pointerEvents: 'none',
+  return React.createElement(
+    'div',
+    {
+      style: {
+        position: 'absolute',
+        inset: -6,
+        display: 'grid',
+        pointerEvents: 'none',
+      },
     },
-    children: [
-      _jsx(ResizerStyles, {}),
-      _jsx(Resizers, {
-        ...props,
-      }),
-    ],
-  });
+    React.createElement(ResizerStyles, null),
+    React.createElement(Resizers, props),
+  );
 };
 const Resizers = (props) => {
   const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
@@ -178,71 +172,69 @@ const Resizers = (props) => {
       },
     );
   };
-  return _jsxs(_Fragment, {
-    children: [
-      _jsx('div', {
-        'data-iui-resizer': 'top-left',
-        onPointerDown: onResizePointerDown,
-        style: {
-          cursor: 'nw-resize',
-        },
-      }),
-      _jsx('div', {
-        'data-iui-resizer': 'top',
-        onPointerDown: onResizePointerDown,
-        style: {
-          cursor: 'n-resize',
-        },
-      }),
-      _jsx('div', {
-        'data-iui-resizer': 'top-right',
-        onPointerDown: onResizePointerDown,
-        style: {
-          cursor: 'ne-resize',
-        },
-      }),
-      _jsx('div', {
-        'data-iui-resizer': 'right',
-        onPointerDown: onResizePointerDown,
-        style: {
-          cursor: 'e-resize',
-        },
-      }),
-      _jsx('div', {
-        'data-iui-resizer': 'bottom-right',
-        onPointerDown: onResizePointerDown,
-        style: {
-          cursor: 'se-resize',
-        },
-      }),
-      _jsx('div', {
-        'data-iui-resizer': 'bottom',
-        onPointerDown: onResizePointerDown,
-        style: {
-          cursor: 's-resize',
-        },
-      }),
-      _jsx('div', {
-        'data-iui-resizer': 'bottom-left',
-        onPointerDown: onResizePointerDown,
-        style: {
-          cursor: 'sw-resize',
-        },
-      }),
-      _jsx('div', {
-        'data-iui-resizer': 'left',
-        onPointerDown: onResizePointerDown,
-        style: {
-          cursor: 'w-resize',
-        },
-      }),
-    ],
-  });
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement('div', {
+      'data-iui-resizer': 'top-left',
+      onPointerDown: onResizePointerDown,
+      style: {
+        cursor: 'nw-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'top',
+      onPointerDown: onResizePointerDown,
+      style: {
+        cursor: 'n-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'top-right',
+      onPointerDown: onResizePointerDown,
+      style: {
+        cursor: 'ne-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'right',
+      onPointerDown: onResizePointerDown,
+      style: {
+        cursor: 'e-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'bottom-right',
+      onPointerDown: onResizePointerDown,
+      style: {
+        cursor: 'se-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'bottom',
+      onPointerDown: onResizePointerDown,
+      style: {
+        cursor: 's-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'bottom-left',
+      onPointerDown: onResizePointerDown,
+      style: {
+        cursor: 'sw-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'left',
+      onPointerDown: onResizePointerDown,
+      style: {
+        cursor: 'w-resize',
+      },
+    }),
+  );
 };
 const ResizerStyles = React.memo(() =>
-  _jsx('style', {
-    children: resizerStyles,
-  }),
+  React.createElement('style', null, resizerStyles),
 );
 const resizerStyles = `
 [data-iui-resizer] {

package/esm/utils/components/ShadowRoot.d.ts

@@ -9,5 +9,5 @@ type ShadowRootProps = {
  *
  * @private
  */
-export declare const ShadowRoot: ({ children, css }: ShadowRootProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ShadowRoot: ({ children, css }: ShadowRootProps) => React.JSX.Element | null;
 export {};

package/esm/utils/components/ShadowRoot.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 * as ReactDOM from 'react-dom';
 import { useLatestRef, useLayoutEffect } from '../hooks/index.js';
@@ -15,24 +10,25 @@ const supportsAdoptedStylesheets =
 export const ShadowRoot = ({ children, css }) => {
   const isHydrating = useHydration() === 'hydrating';
   if (!isBrowser) {
-    return _jsxs('template', {
-      shadowrootmode: 'open',
-      children: [
-        css &&
-          _jsx('style', {
-            children: css,
-          }),
-        children,
-      ],
-    });
+    return React.createElement(
+      'template',
+      {
+        shadowrootmode: 'open',
+      },
+      css && React.createElement('style', null, css),
+      children,
+    );
   }
   if (supportsDSD && isHydrating) {
     return null;
   }
-  return _jsx(ClientShadowRoot, {
-    css: css,
-    children: children,
-  });
+  return React.createElement(
+    ClientShadowRoot,
+    {
+      css: css,
+    },
+    children,
+  );
 };
 const ClientShadowRoot = ({ children, css }) => {
   const templateRef = React.useRef(null);
@@ -41,18 +37,14 @@ const ClientShadowRoot = ({ children, css }) => {
   });
   const fallbackCss =
     !supportsAdoptedStylesheets && css
-      ? _jsx('style', {
-          children: css,
-        })
+      ? React.createElement('style', null, css)
       : null;
   return shadowRoot
     ? ReactDOM.createPortal(
-        _jsxs(_Fragment, {
-          children: [fallbackCss, children],
-        }),
+        React.createElement(React.Fragment, null, fallbackCss, children),
         shadowRoot,
       )
-    : _jsx('template', {
+    : React.createElement('template', {
         ref: templateRef,
       });
 };

package/esm/utils/components/VirtualScroll.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
@@ -62,14 +61,14 @@ const getVisibleNodeCount = (
 };
 export const VirtualScroll = React.forwardRef((props, ref) => {
   const { innerProps, outerProps, visibleChildren } = useVirtualization(props);
-  return _jsx('div', {
-    ...outerProps,
-    ref: ref,
-    children: _jsx('div', {
-      ...innerProps,
-      children: visibleChildren,
-    }),
-  });
+  return React.createElement(
+    'div',
+    {
+      ...outerProps,
+      ref: ref,
+    },
+    React.createElement('div', innerProps, visibleChildren),
+  );
 });
 export const useVirtualization = (props) => {
   const {

package/esm/utils/components/WithCSSTransition.d.ts

@@ -3,4 +3,4 @@ import { CSSTransition } from 'react-transition-group';
 export declare const WithCSSTransition: (props: Partial<React.ComponentPropsWithoutRef<typeof CSSTransition>> & {
     children: JSX.Element;
     dimension?: "height" | "width";
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/esm/utils/components/WithCSSTransition.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { styles } from '../../styles.js';
@@ -6,36 +5,39 @@ export const WithCSSTransition = (props) => {
   const { in: visible, dimension = 'height', children, ...rest } = props;
   const expandedSize = React.useRef(0);
   const dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
-  return _jsx(CSSTransition, {
-    in: visible,
-    timeout: 200,
-    unmountOnExit: true,
-    onEnter: (node) => {
-      node.style[`min${dimensionCamelCase}`] = 'initial';
-      node.style[dimension] = '0px';
+  return React.createElement(
+    CSSTransition,
+    {
+      in: visible,
+      timeout: 200,
+      unmountOnExit: true,
+      onEnter: (node) => {
+        node.style[`min${dimensionCamelCase}`] = 'initial';
+        node.style[dimension] = '0px';
+      },
+      onEntering: (node) => {
+        node.style[dimension] = `${expandedSize.current}px`;
+      },
+      onEntered: (node) => {
+        node.style[`min${dimensionCamelCase}`] = '';
+        node.style[dimension] = '';
+      },
+      onExit: (node) => {
+        node.style[dimension] = `${expandedSize.current}px`;
+      },
+      onExiting: (node) => {
+        node.style[`min${dimensionCamelCase}`] = 'initial';
+        node.style[dimension] = '0px';
+      },
+      classNames: {
+        enter: styles['iui-enter'],
+        enterActive: styles['iui-enter-active'],
+        exit: styles['iui-exit'],
+        exitActive: styles['iui-exit-active'],
+      },
+      ...rest,
     },
-    onEntering: (node) => {
-      node.style[dimension] = `${expandedSize.current}px`;
-    },
-    onEntered: (node) => {
-      node.style[`min${dimensionCamelCase}`] = '';
-      node.style[dimension] = '';
-    },
-    onExit: (node) => {
-      node.style[dimension] = `${expandedSize.current}px`;
-    },
-    onExiting: (node) => {
-      node.style[`min${dimensionCamelCase}`] = 'initial';
-      node.style[dimension] = '0px';
-    },
-    classNames: {
-      enter: styles['iui-enter'],
-      enterActive: styles['iui-enter-active'],
-      exit: styles['iui-exit'],
-      exitActive: styles['iui-exit-active'],
-    },
-    ...rest,
-    children: React.isValidElement(children)
+    React.isValidElement(children)
       ? React.cloneElement(children, {
           ref: (el) => {
             if (el) {
@@ -43,6 +45,6 @@ export const WithCSSTransition = (props) => {
             }
           },
         })
-      : _jsx(_Fragment, {}),
-  });
+      : React.createElement(React.Fragment, null),
+  );
 };

package/esm/utils/functions/polymorphic.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { useGlobals } from '../hooks/useGlobals.js';
@@ -23,7 +22,7 @@ const _base = (defaultElement) => {
         (_props = props).tabIndex ?? (_props.tabIndex = 0);
       }
       useGlobals();
-      return _jsx(Element, {
+      return React.createElement(Element, {
         ref: ref,
         ...props,
       });

package/esm/utils/icons/StatusIconMap.d.ts

@@ -1,7 +1,7 @@
-import type { CommonProps } from '../props.js';
+import * as React from 'react';
 export declare const StatusIconMap: {
-    negative: (args?: CommonProps) => import("react/jsx-runtime").JSX.Element;
-    positive: (args?: CommonProps) => import("react/jsx-runtime").JSX.Element;
-    warning: (args?: CommonProps) => import("react/jsx-runtime").JSX.Element;
-    informational: (args?: CommonProps) => import("react/jsx-runtime").JSX.Element;
+    negative: (args?: React.ComponentPropsWithoutRef<"svg">) => React.JSX.Element;
+    positive: (args?: React.ComponentPropsWithoutRef<"svg">) => React.JSX.Element;
+    warning: (args?: React.ComponentPropsWithoutRef<"svg">) => React.JSX.Element;
+    informational: (args?: React.ComponentPropsWithoutRef<"svg">) => React.JSX.Element;
 };

package/esm/utils/icons/StatusIconMap.js

@@ -1,26 +1,26 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
+import * as React from 'react';
 import { SvgInfoCircular } from './SvgInfoCircular.js';
 import { SvgStatusError } from './SvgStatusError.js';
 import { SvgStatusSuccess } from './SvgStatusSuccess.js';
 import { SvgStatusWarning } from './SvgStatusWarning.js';
 export const StatusIconMap = {
   negative: (args) =>
-    _jsx(SvgStatusError, {
+    React.createElement(SvgStatusError, {
       'aria-hidden': true,
       ...args,
     }),
   positive: (args) =>
-    _jsx(SvgStatusSuccess, {
+    React.createElement(SvgStatusSuccess, {
       'aria-hidden': true,
       ...args,
     }),
   warning: (args) =>
-    _jsx(SvgStatusWarning, {
+    React.createElement(SvgStatusWarning, {
       'aria-hidden': true,
       ...args,
     }),
   informational: (args) =>
-    _jsx(SvgInfoCircular, {
+    React.createElement(SvgInfoCircular, {
       'aria-hidden': true,
       ...args,
     }),

package/esm/utils/icons/SvgCalendar.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const SvgCalendar: (props: React.ComponentPropsWithoutRef<"svg">) => import("react/jsx-runtime").JSX.Element;
+export declare const SvgCalendar: (props: React.ComponentPropsWithoutRef<"svg">) => React.JSX.Element;