@itwin/itwinui-react 3.12.0 → 3.12.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.12.2
+
+### Patch Changes
+
+- [#2127](https://github.com/iTwin/iTwinUI/pull/2127): Fixed an issue in `Dialog` and `Modal`, where long titles were not wrapping properly.
+
+## 3.12.1
+
+### Patch Changes
+
+- [#2124](https://github.com/iTwin/iTwinUI/pull/2124): Fixed a CommonJS-related error where an internal variable was accidentally trying to override the [`module`](https://nodejs.org/api/modules.html#the-module-object) object.
+- [#2122](https://github.com/iTwin/iTwinUI/pull/2122): The new JSX transform added in [v3.12.0](https://github.com/iTwin/iTwinUI/releases/tag/%40itwin%2Fitwinui-react%403.12.0) has been reverted, because React 17 [doesn't properly support it](https://github.com/facebook/react/issues/20235).
+
 ## 3.12.0
 
 ### Minor Changes
@@ -8,6 +21,7 @@
 - [#2076](https://github.com/iTwin/iTwinUI/pull/2076): Added open popover styling to `Button` (and `IconButton`). When an associated `Popover` or `DropdownMenu` is open, the button will now get a subtle visual indication.
 - [#2111](https://github.com/iTwin/iTwinUI/pull/2111): Added the ability to pass arbitrary DOM props to `TreeNode`.
 - [#2107](https://github.com/iTwin/iTwinUI/pull/2107): A new `meta` object is exported, containing meta information about the package.
+
   ```ts
   import { meta } from '@itwin/itwinui-react';
 
@@ -15,6 +29,7 @@
   ```
 
 - [#2048](https://github.com/iTwin/iTwinUI/pull/2048): Fixed a bug in `ComboBox` where the controlled state (`value` prop) was not given priority over the uncontrolled state. As a result:
+
   - Setting the default value using `value={myDefaultValue}` will no longer work. Instead, use the new `defaultValue` prop.
   - Resetting the value using `value={null}` will now force the ComboBox to be in _controlled_ mode. If you want to reset the value but be in _uncontrolled_ mode, then use `value={undefined}` instead.
 

package/cjs/core/Alert/Alert.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Alert', {
 });
 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');
@@ -28,31 +27,29 @@ const AlertComponent = _react.forwardRef((props, forwardedRef) => {
     onClose,
     ...rest
   } = props;
-  return (0, _jsxruntime.jsxs)(Alert.Wrapper, {
-    type: type,
-    isSticky: isSticky,
-    ref: forwardedRef,
-    ...rest,
-    children: [
-      (0, _jsxruntime.jsx)(Alert.Icon, {}),
-      (0, _jsxruntime.jsxs)(Alert.Message, {
-        children: [
-          children,
-          clickableText
-            ? (0, _jsxruntime.jsx)(Alert.Action, {
-                ...clickableTextProps,
-                children: clickableText,
-              })
-            : null,
-        ],
-      }),
-      onClose
-        ? (0, _jsxruntime.jsx)(Alert.CloseButton, {
-            onClick: onClose,
-          })
+  return _react.createElement(
+    Alert.Wrapper,
+    {
+      type: type,
+      isSticky: isSticky,
+      ref: forwardedRef,
+      ...rest,
+    },
+    _react.createElement(Alert.Icon, null),
+    _react.createElement(
+      Alert.Message,
+      null,
+      children,
+      clickableText
+        ? _react.createElement(Alert.Action, clickableTextProps, clickableText)
         : null,
-    ],
-  });
+    ),
+    onClose
+      ? _react.createElement(Alert.CloseButton, {
+          onClick: onClose,
+        })
+      : null,
+  );
 });
 AlertComponent.displayName = 'Alert';
 const AlertWrapper = _react.forwardRef((props, ref) => {
@@ -63,31 +60,40 @@ const AlertWrapper = _react.forwardRef((props, ref) => {
     isSticky = false,
     ...rest
   } = props;
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    className: (0, _classnames.default)('iui-alert', className),
-    'data-iui-status': type,
-    'data-iui-variant': isSticky ? 'sticky' : undefined,
-    ref: ref,
-    ...rest,
-    children: (0, _jsxruntime.jsx)(AlertContext.Provider, {
-      value: {
-        type,
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-alert', className),
+      'data-iui-status': type,
+      'data-iui-variant': isSticky ? 'sticky' : undefined,
+      ref: ref,
+      ...rest,
+    },
+    _react.createElement(
+      AlertContext.Provider,
+      {
+        value: {
+          type,
+        },
       },
-      children: children,
-    }),
-  });
+      children,
+    ),
+  );
 });
 AlertWrapper.displayName = 'Alert.Wrapper';
 const AlertIcon = _react.forwardRef((props, ref) => {
   const { children, ...rest } = props;
   const { type } = (0, _index.useSafeContext)(AlertContext);
   const StatusIcon = _index.StatusIconMap[type];
-  return (0, _jsxruntime.jsx)(_Icon.Icon, {
-    fill: type,
-    ref: ref,
-    ...rest,
-    children: children ?? (0, _jsxruntime.jsx)(StatusIcon, {}),
-  });
+  return _react.createElement(
+    _Icon.Icon,
+    {
+      fill: type,
+      ref: ref,
+      ...rest,
+    },
+    children ?? _react.createElement(StatusIcon, null),
+  );
 });
 AlertIcon.displayName = 'Alert.Icon';
 const AlertMessage = _index.polymorphic.span('iui-alert-message');
@@ -95,31 +101,37 @@ AlertMessage.displayName = 'Alert.Message';
 const AlertAction = _react.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
   const { type } = (0, _index.useSafeContext)(AlertContext);
-  return (0, _jsxruntime.jsx)(_Anchor.Anchor, {
-    as: !!props.href ? 'a' : 'button',
-    className: (0, _classnames.default)(
-      'iui-button-base',
-      'iui-alert-link',
-      className,
-    ),
-    underline: true,
-    'data-iui-status': type,
-    ref: ref,
-    ...rest,
-    children: children,
-  });
+  return _react.createElement(
+    _Anchor.Anchor,
+    {
+      as: !!props.href ? 'a' : 'button',
+      className: (0, _classnames.default)(
+        'iui-button-base',
+        'iui-alert-link',
+        className,
+      ),
+      underline: true,
+      'data-iui-status': type,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 AlertAction.displayName = 'Alert.Action';
 const AlertCloseButton = _react.forwardRef((props, ref) => {
   const { children, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_IconButton.IconButton, {
-    styleType: 'borderless',
-    size: 'small',
-    'aria-label': 'Close',
-    ref: ref,
-    ...rest,
-    children: children ?? (0, _jsxruntime.jsx)(_index.SvgCloseSmall, {}),
-  });
+  return _react.createElement(
+    _IconButton.IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      'aria-label': 'Close',
+      ref: ref,
+      ...rest,
+    },
+    children ?? _react.createElement(_index.SvgCloseSmall, null),
+  );
 });
 AlertCloseButton.displayName = 'Alert.CloseButton';
 const Alert = Object.assign(AlertComponent, {

package/cjs/core/Avatar/Avatar.js

@@ -19,7 +19,6 @@ _export(exports, {
 });
 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');
@@ -55,26 +54,29 @@ const Avatar = _react.forwardRef((props, ref) => {
     ...defaultStatusTitles,
     ...translatedStatusTitles,
   };
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    as: 'span',
-    className: (0, _classnames.default)('iui-avatar', className),
-    'data-iui-size': size !== 'medium' ? size : undefined,
-    'data-iui-status': status,
-    title: title,
-    style: {
-      backgroundColor: getBackground(backgroundColor),
-      ...style,
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'span',
+      className: (0, _classnames.default)('iui-avatar', className),
+      'data-iui-size': size !== 'medium' ? size : undefined,
+      'data-iui-status': status,
+      title: title,
+      style: {
+        backgroundColor: getBackground(backgroundColor),
+        ...style,
+      },
+      ref: ref,
+      ...rest,
     },
-    ref: ref,
-    ...rest,
-    children: [
-      !image ? abbreviation?.substring(0, 2) : null,
-      image,
-      status
-        ? (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
-            children: statusTitles[status],
-          })
-        : null,
-    ],
-  });
+    !image ? abbreviation?.substring(0, 2) : null,
+    image,
+    status
+      ? _react.createElement(
+          _VisuallyHidden.VisuallyHidden,
+          null,
+          statusTitles[status],
+        )
+      : null,
+  );
 });

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'AvatarGroup', {
 });
 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');
@@ -36,38 +35,41 @@ const AvatarGroup = _react.forwardRef((props, ref) => {
       }),
     );
   };
-  return (0, _jsxruntime.jsxs)(_index.Box, {
-    className: (0, _classnames.default)(
-      'iui-avatar-list',
-      {
-        'iui-animated': animated,
-        'iui-stacked': stacked,
-      },
-      className,
-    ),
-    ref: ref,
-    ...rest,
-    children: [
-      childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
-      childrenArray.length > maxIcons + 1 &&
-        (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-          children: [
-            getAvatarList(maxIcons),
-            (0, _jsxruntime.jsx)(_index.Box, {
-              ...countIconProps,
-              className: (0, _classnames.default)(
-                'iui-avatar',
-                'iui-avatar-count',
-                countIconProps?.className,
-              ),
-              'data-iui-size': iconSize !== 'medium' ? iconSize : undefined,
-              children:
-                childrenLength <= maxLength
-                  ? `${childrenLength - maxIcons}`
-                  : `${maxLength}+`,
-            }),
-          ],
-        }),
-    ],
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-avatar-list',
+        {
+          'iui-animated': animated,
+          'iui-stacked': stacked,
+        },
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
+    childrenArray.length > maxIcons + 1 &&
+      _react.createElement(
+        _react.Fragment,
+        null,
+        getAvatarList(maxIcons),
+        _react.createElement(
+          _index.Box,
+          {
+            ...countIconProps,
+            className: (0, _classnames.default)(
+              'iui-avatar',
+              'iui-avatar-count',
+              countIconProps?.className,
+            ),
+            'data-iui-size': iconSize !== 'medium' ? iconSize : undefined,
+          },
+          childrenLength <= maxLength
+            ? `${childrenLength - maxIcons}`
+            : `${maxLength}+`,
+        ),
+      ),
+  );
 });

package/cjs/core/Backdrop/Backdrop.js

@@ -10,13 +10,12 @@ Object.defineProperty(exports, 'Backdrop', {
 });
 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');
 const Backdrop = _react.forwardRef((props, ref) => {
   const { isVisible = true, className, ...rest } = props;
-  return (0, _jsxruntime.jsx)(_index.Box, {
+  return _react.createElement(_index.Box, {
     className: (0, _classnames.default)(
       'iui-backdrop',
       {

package/cjs/core/Badge/Badge.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Badge', {
 });
 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');
@@ -42,13 +41,16 @@ const Badge = _react.forwardRef((props, forwardedRef) => {
       : {
           ...style,
         };
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    as: 'span',
-    className: (0, _classnames.default)('iui-badge', className),
-    style: _style,
-    'data-iui-status': statusValue,
-    ref: forwardedRef,
-    ...rest,
-    children: children,
-  });
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'span',
+      className: (0, _classnames.default)('iui-badge', className),
+      style: _style,
+      'data-iui-status': statusValue,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, 'Breadcrumbs', {
 });
 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');
@@ -28,78 +27,84 @@ const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
   } = props;
   const [overflowRef, visibleCount] = (0, _index.useOverflow)(items);
   const refs = (0, _index.useMergedRefs)(overflowRef, ref);
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    as: 'nav',
-    className: (0, _classnames.default)('iui-breadcrumbs', className),
-    ref: refs,
-    'aria-label': 'Breadcrumb',
-    ...rest,
-    children: (0, _jsxruntime.jsxs)(_index.Box, {
-      as: 'ol',
-      className: 'iui-breadcrumbs-list',
-      children: [
-        visibleCount > 1 &&
-          (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-            children: [
-              (0, _jsxruntime.jsx)(ListItem, {
-                item: items[0],
-                isActive: currentIndex === 0,
-              }),
-              (0, _jsxruntime.jsx)(Separator, {
-                separator: separator,
-              }),
-            ],
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'nav',
+      className: (0, _classnames.default)('iui-breadcrumbs', className),
+      ref: refs,
+      'aria-label': 'Breadcrumb',
+      ...rest,
+    },
+    _react.createElement(
+      _index.Box,
+      {
+        as: 'ol',
+        className: 'iui-breadcrumbs-list',
+      },
+      visibleCount > 1 &&
+        _react.createElement(
+          _react.Fragment,
+          null,
+          _react.createElement(ListItem, {
+            item: items[0],
+            isActive: currentIndex === 0,
           }),
-        items.length - visibleCount > 0 &&
-          (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-            children: [
-              (0, _jsxruntime.jsx)(_index.Box, {
-                as: 'li',
-                className: 'iui-breadcrumbs-item',
-                children: overflowButton
-                  ? overflowButton(visibleCount)
-                  : (0, _jsxruntime.jsx)(_index.Box, {
-                      as: 'span',
-                      className: 'iui-breadcrumbs-content',
-                      children: '…',
-                    }),
-              }),
-              (0, _jsxruntime.jsx)(Separator, {
-                separator: separator,
-              }),
-            ],
+          _react.createElement(Separator, {
+            separator: separator,
           }),
-        items
-          .slice(
-            visibleCount > 1
-              ? items.length - visibleCount + 1
-              : items.length - 1,
-          )
-          .map((_, _index) => {
-            const index =
-              visibleCount > 1
-                ? 1 + (items.length - visibleCount) + _index
-                : items.length - 1;
-            return (0, _jsxruntime.jsxs)(
-              _react.Fragment,
-              {
-                children: [
-                  (0, _jsxruntime.jsx)(ListItem, {
-                    item: items[index],
-                    isActive: currentIndex === index,
-                  }),
-                  index < items.length - 1 &&
-                    (0, _jsxruntime.jsx)(Separator, {
-                      separator: separator,
-                    }),
-                ],
-              },
-              index,
-            );
+        ),
+      items.length - visibleCount > 0 &&
+        _react.createElement(
+          _react.Fragment,
+          null,
+          _react.createElement(
+            _index.Box,
+            {
+              as: 'li',
+              className: 'iui-breadcrumbs-item',
+            },
+            overflowButton
+              ? overflowButton(visibleCount)
+              : _react.createElement(
+                  _index.Box,
+                  {
+                    as: 'span',
+                    className: 'iui-breadcrumbs-content',
+                  },
+                  '…',
+                ),
+          ),
+          _react.createElement(Separator, {
+            separator: separator,
           }),
-      ],
-    }),
-  });
+        ),
+      items
+        .slice(
+          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
+        )
+        .map((_, _index) => {
+          const index =
+            visibleCount > 1
+              ? 1 + (items.length - visibleCount) + _index
+              : items.length - 1;
+          return _react.createElement(
+            _react.Fragment,
+            {
+              key: index,
+            },
+            _react.createElement(ListItem, {
+              item: items[index],
+              isActive: currentIndex === index,
+            }),
+            index < items.length - 1 &&
+              _react.createElement(Separator, {
+                separator: separator,
+              }),
+          );
+        }),
+    ),
+  );
 });
 const ListItem = ({ item, isActive }) => {
   let children = item;
@@ -111,28 +116,31 @@ const ListItem = ({ item, isActive }) => {
     logWarningInDev(
       'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
     );
-    children = (0, _jsxruntime.jsx)(BreadcrumbsItem, {
-      ...children.props,
-    });
+    children = _react.createElement(BreadcrumbsItem, children.props);
   }
-  return (0, _jsxruntime.jsx)(_index.Box, {
-    as: 'li',
-    className: 'iui-breadcrumbs-item',
-    children:
-      children &&
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'li',
+      className: 'iui-breadcrumbs-item',
+    },
+    children &&
       _react.cloneElement(children, {
         'aria-current':
           children.props['aria-current'] ?? isActive ? 'location' : undefined,
       }),
-  });
+  );
 };
 const Separator = ({ separator }) =>
-  (0, _jsxruntime.jsx)(_index.Box, {
-    as: 'li',
-    className: 'iui-breadcrumbs-separator',
-    'aria-hidden': true,
-    children: separator ?? (0, _jsxruntime.jsx)(_index.SvgChevronRight, {}),
-  });
+  _react.createElement(
+    _index.Box,
+    {
+      as: 'li',
+      className: 'iui-breadcrumbs-separator',
+      'aria-hidden': true,
+    },
+    separator ?? _react.createElement(_index.SvgChevronRight, null),
+  );
 const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
   const { as: asProp, ...rest } = props;
   const commonProps = {
@@ -147,12 +155,12 @@ const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
     String(asProp) === 'span' ||
     (props.href == null && props.onClick == null && asProp == null)
   ) {
-    return (0, _jsxruntime.jsx)(_index.Box, {
+    return _react.createElement(_index.Box, {
       as: 'span',
       ...commonProps,
     });
   }
-  return (0, _jsxruntime.jsx)(_Button.Button, {
+  return _react.createElement(_Button.Button, {
     as:
       asProp === 'a' || (asProp == null && !!props.href)
         ? _Anchor.Anchor