@itwin/itwinui-react 3.11.3 → 3.12.1

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # Changelog
 
+## 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
+
+- [#2048](https://github.com/iTwin/iTwinUI/pull/2048): Added a new `defaultValue` prop to `ComboBox`. This is useful when you don't want to maintain your own state but still want to control the initial `value`.
+- [#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';
+
+  console.log(meta.version, meta.module); // 3.12.0, ESM
+  ```
+
+- [#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.
+
+- [#2101](https://github.com/iTwin/iTwinUI/pull/2101): Passing an `IconButton` to `Tile.QuickAction` and `Tile.TypeIndicator` is now deprecated. Use `Tile.IconButton` instead.
+- [#2021](https://github.com/iTwin/iTwinUI/pull/2021): In menu-like components (`DropdownMenu`, `SplitButton`, `Table`'s column manager), using the _mouse_ to operate the menu will no longer move focus like it does when using the _keyboard_.
+- [#2021](https://github.com/iTwin/iTwinUI/pull/2021): `MenuItem`'s `tabIndex` now is `0` when it's selected and `-1` when it's not. Additionally, `MenuItem` passed inside most menu type components (e.g. `DropdownMenu`, `SplitButton`, `Table`'s column manager, etc.) have roving `tabIndex`.
+- Dependency changes:
+  - [#2116](https://github.com/iTwin/iTwinUI/pull/2116): Bumped the minimum required version of `@floating-ui/react` to `0.26.18`.
+  - [#2100](https://github.com/iTwin/iTwinUI/pull/2100): Replaced dependency on `tslib` with `@swc/helpers`. This is used mainly by the CommonJS build for [interop reasons](https://www.typescriptlang.org/docs/handbook/modules/appendices/esm-cjs-interop.html).
+
+### Patch Changes
+
+- [#2117](https://github.com/iTwin/iTwinUI/pull/2117): Fixed an error in `Select` caused by updating `@floating-ui/react` to `0.26.18`.
+- [#2101](https://github.com/iTwin/iTwinUI/pull/2101): Fixed a small visual bug in `Tile.IconButton` where the hover state wasn't working.
+- [#2021](https://github.com/iTwin/iTwinUI/pull/2021): `MenuItem` now renders as a `<button>` instead of a `<div>`.
+- [#2113](https://github.com/iTwin/iTwinUI/pull/2113): Fixed an issue where a portaled `Popover` was sometimes showing up in the wrong window during the first render.
+- [#2048](https://github.com/iTwin/iTwinUI/pull/2048): Fixed a bug in `ComboBox` where the `isSelected` passed to `itemRenderer` was always `false` whenever `multiple` was `true`.
+
+### Build Output Changes
+
+- [#2102](https://github.com/iTwin/iTwinUI/pull/2102): The build output is now generated using SWC and uses the [new JSX transform](https://react.dev/link/new-jsx-transform) instead of `React.createElement`.
+- [#2118](https://github.com/iTwin/iTwinUI/pull/2118): Type declarations are now generated using TypeScript 5.5 with `"module": "NodeNext"`.
+- [#2118](https://github.com/iTwin/iTwinUI/pull/2118): The `"exports"` fallback for `/react-table` types is now handled using [`typesVersions`](https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#version-selection-with-typesversions).
+- [#2100](https://github.com/iTwin/iTwinUI/pull/2100): The build output is now (again) formatted using `prettier` for easier debugging.
+- [#2100](https://github.com/iTwin/iTwinUI/pull/2100): All code comments have been removed from the build output.
+
 ## 3.11.3
 
 ### Patch Changes

package/cjs/core/Alert/Alert.d.ts

@@ -55,13 +55,9 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "auto" | "medium" | "large" | import("../../utils/types.js").AnyString | undefined;
-        /**
-         * Type of the alert.
-         * @default 'informational'
-         */
-        fill?: "default" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | undefined;
-        padded?: boolean | undefined;
+        size?: "auto" | "small" | "medium" | "large" | import("../../utils/types.js").AnyString;
+        fill?: "default" | "positive" | "informational" | "negative" | "warning" | import("../../utils/types.js").AnyString;
+        padded?: boolean;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }>;

package/cjs/core/Alert/Alert.js

@@ -1,134 +1,143 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-const IconButton_js_1 = require("../Buttons/IconButton.js");
-const Icon_js_1 = require("../Icon/Icon.js");
-const Anchor_js_1 = require("../Typography/Anchor.js");
-const AlertContext = React.createContext(undefined);
-// ----------------------------------------------------------------------------
-// Alert component
-const AlertComponent = React.forwardRef((props, forwardedRef) => {
-    const { children, type = 'informational', isSticky = false, clickableText, clickableTextProps, onClose, ...rest } = props;
-    return (React.createElement(exports.Alert.Wrapper, { type: type, isSticky: isSticky, ref: forwardedRef, ...rest },
-        React.createElement(exports.Alert.Icon, null),
-        React.createElement(exports.Alert.Message, null,
-            children,
-            clickableText ? (React.createElement(exports.Alert.Action, { ...clickableTextProps }, clickableText)) : null),
-        onClose ? React.createElement(exports.Alert.CloseButton, { onClick: onClose }) : null));
+Object.defineProperty(exports, 'Alert', {
+  enumerable: true,
+  get: function () {
+    return Alert;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const _Icon = require('../Icon/Icon.js');
+const _Anchor = require('../Typography/Anchor.js');
+const AlertContext = _react.createContext(undefined);
+const AlertComponent = _react.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    type = 'informational',
+    isSticky = false,
+    clickableText,
+    clickableTextProps,
+    onClose,
+    ...rest
+  } = props;
+  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';
-// ----------------------------------------------------------------------------
-// Alert.Wrapper component
-const AlertWrapper = React.forwardRef((props, ref) => {
-    const { children, className, type = 'informational', isSticky = false, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, ref: ref, ...rest },
-        React.createElement(AlertContext.Provider, { value: { type } }, children)));
+const AlertWrapper = _react.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    type = 'informational',
+    isSticky = false,
+    ...rest
+  } = props;
+  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,
+    ),
+  );
 });
 AlertWrapper.displayName = 'Alert.Wrapper';
-// ----------------------------------------------------------------------------
-// Alert.Icon component
-const AlertIcon = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const { type } = (0, index_js_1.useSafeContext)(AlertContext);
-    const StatusIcon = index_js_1.StatusIconMap[type];
-    return (React.createElement(Icon_js_1.Icon, { fill: type, ref: ref, ...rest }, children ?? React.createElement(StatusIcon, null)));
+const AlertIcon = _react.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  const { type } = (0, _index.useSafeContext)(AlertContext);
+  const StatusIcon = _index.StatusIconMap[type];
+  return _react.createElement(
+    _Icon.Icon,
+    {
+      fill: type,
+      ref: ref,
+      ...rest,
+    },
+    children ?? _react.createElement(StatusIcon, null),
+  );
 });
 AlertIcon.displayName = 'Alert.Icon';
-// ----------------------------------------------------------------------------
-// Alert.Message component
-const AlertMessage = index_js_1.polymorphic.span('iui-alert-message');
+const AlertMessage = _index.polymorphic.span('iui-alert-message');
 AlertMessage.displayName = 'Alert.Message';
-// ----------------------------------------------------------------------------
-// Alert.Action component
-const AlertAction = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { type } = (0, index_js_1.useSafeContext)(AlertContext);
-    return (React.createElement(Anchor_js_1.Anchor, { as: (!!props.href ? 'a' : 'button'), className: (0, classnames_1.default)('iui-button-base', 'iui-alert-link', className), underline: true, "data-iui-status": type, ref: ref, ...rest }, children));
+const AlertAction = _react.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const { type } = (0, _index.useSafeContext)(AlertContext);
+  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';
-// ----------------------------------------------------------------------------
-// Alert.CloseButton component
-const AlertCloseButton = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'Close', ref: ref, ...rest }, children ?? React.createElement(index_js_1.SvgCloseSmall, null)));
+const AlertCloseButton = _react.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  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';
-/**
- * A small box to quickly grab user attention and communicate a brief message
- * @example
- * <Alert>This is an alert.</Alert>
- * @example
- * <Alert.Wrapper type='informational'>
- *  <Alert.Icon />
- *  <Alert.Message>This is an informational alert.</Alert.Message>
- *  <Alert.CloseButton onClick={() => {}} />
- * </Alert.Wrapper>
- * @example
- * <Alert.Wrapper type='positive'>
- *  <Alert.Icon>
- *    <SvgSmileyHappy />
- *  </Alert.Icon>
- *  <Alert.Message>
- *    This is an alert.
- *    <Alert.Action>This is clickable text.</Alert.Action>
- *  </Alert.Message>
- *  <Alert.CloseButton onClick={() => {}}>
- *    <SvgCollapse />
- *  </Alert.CloseButton>
- * </Alert.Wrapper>
- */
-exports.Alert = Object.assign(AlertComponent, {
-    /**
-     *  Alert wrapper subcomponent
-     */
-    Wrapper: AlertWrapper,
-    /**
-     * 	Alert icon subcomponent
-     */
-    Icon: AlertIcon,
-    /**
-     * 	Alert message subcomponent
-     */
-    Message: AlertMessage,
-    /**
-     * 	Alert action subcomponent for the link you want to provide.
-     */
-    Action: AlertAction,
-    /**
-     * 	Alert close button subcomponent
-     */
-    CloseButton: AlertCloseButton,
+const Alert = Object.assign(AlertComponent, {
+  Wrapper: AlertWrapper,
+  Icon: AlertIcon,
+  Message: AlertMessage,
+  Action: AlertAction,
+  CloseButton: AlertCloseButton,
 });

package/cjs/core/Avatar/Avatar.js

@@ -1,75 +1,82 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.defaultStatusTitles = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
-/**
- * Helper function that returns one of the preset badge color values.
- */
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  Avatar: function () {
+    return Avatar;
+  },
+  defaultStatusTitles: function () {
+    return defaultStatusTitles;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 const getBackground = (color) => {
-    if (!color) {
-        return '';
-    }
-    return (0, index_js_1.isSoftBackground)(color) ? index_js_1.SoftBackgrounds[color] : color;
+  if (!color) {
+    return '';
+  }
+  return (0, _index.isSoftBackground)(color)
+    ? _index.SoftBackgrounds[color]
+    : color;
 };
-exports.defaultStatusTitles = {
-    away: 'Away',
-    busy: 'Busy',
-    offline: 'Offline',
-    online: 'Online',
+const defaultStatusTitles = {
+  away: 'Away',
+  busy: 'Busy',
+  offline: 'Offline',
+  online: 'Online',
 };
-/**
- * Basic avatar component
- * @example
- * <caption>Small icon with abbreviation</caption>
- * <Avatar size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
- * @example
- * <caption>Medium icon with image</caption>
- * <Avatar size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
- * @example
- * <caption>Large icon with status</caption>
- * <Avatar size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
- * @example
- * <caption>X-large icon with image</caption>
- * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
- */
-exports.Avatar = React.forwardRef((props, ref) => {
-    const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
-    const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.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 },
-        !image ? abbreviation?.substring(0, 2) : null,
-        image,
-        status ? React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, statusTitles[status]) : null));
+const Avatar = _react.forwardRef((props, ref) => {
+  const {
+    size = 'small',
+    status,
+    abbreviation,
+    image,
+    backgroundColor,
+    title,
+    translatedStatusTitles,
+    className,
+    style,
+    ...rest
+  } = props;
+  const statusTitles = {
+    ...defaultStatusTitles,
+    ...translatedStatusTitles,
+  };
+  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,
+    },
+    !image ? abbreviation?.substring(0, 2) : null,
+    image,
+    status
+      ? _react.createElement(
+          _VisuallyHidden.VisuallyHidden,
+          null,
+          statusTitles[status],
+        )
+      : null,
+  );
 });