@itwin/itwinui-react 3.0.4 → 3.0.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.0.6
+
+### Patch Changes
+
+- [#1693](https://github.com/iTwin/iTwinUI/pull/1693): Fixed an issue where Dialog content was appearing blurred on Windows.
+
+## 3.0.5
+
+### Patch Changes
+
+- [#1683](https://github.com/iTwin/iTwinUI/pull/1683): Improved `ExpandableBlock` animation so that it doesn't push content outside its bounds.
+- [#1687](https://github.com/iTwin/iTwinUI/pull/1687): Fixed `Overlay` component to correctly add polyfill for `inert`.
+
 ## 3.0.4
 
 ### Patch Changes

package/cjs/core/Alert/Alert.js

@@ -1,85 +1,44 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * 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 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__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 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,
-  );
+    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));
 });
 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 { 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)));
 });
 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 { 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)));
 });
 AlertIcon.displayName = 'Alert.Icon';
 // ----------------------------------------------------------------------------
@@ -89,34 +48,15 @@ AlertMessage.displayName = 'Alert.Message';
 // ----------------------------------------------------------------------------
 // Alert.Action component
 const AlertAction = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  return React.createElement(
-    index_js_1.ButtonBase,
-    {
-      as: !!props.href ? 'a' : 'button',
-      className: (0, classnames_1.default)('iui-alert-link', className),
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
+    const { children, className, ...rest } = props;
+    return (React.createElement(index_js_1.ButtonBase, { as: (!!props.href ? 'a' : 'button'), className: (0, classnames_1.default)('iui-alert-link', className), 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 { 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)));
 });
 AlertCloseButton.displayName = 'Alert.CloseButton';
 /**
@@ -144,25 +84,25 @@ AlertCloseButton.displayName = '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,
+    /**
+     *  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,
 });
 exports.default = exports.Alert;

package/cjs/core/Avatar/Avatar.js

@@ -1,31 +1,29 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = exports.defaultStatusTitles = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * 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 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__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.
  */
 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_js_1.isSoftBackground)(color) ? index_js_1.SoftBackgrounds[color] : color;
 };
 exports.defaultStatusTitles = {
-  away: 'Away',
-  busy: 'Busy',
-  offline: 'Offline',
-  online: 'Online',
+    away: 'Away',
+    busy: 'Busy',
+    offline: 'Offline',
+    online: 'Online',
 };
 /**
  * Basic avatar component
@@ -43,46 +41,11 @@ exports.defaultStatusTitles = {
  * <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',
-        { [`iui-${size}`]: size !== 'medium' },
-        className,
-      ),
-      '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 { 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', { [`iui-${size}`]: size !== 'medium' }, className), "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));
 });
 exports.default = exports.Avatar;

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarGroup = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Group Avatars together.
  *
@@ -37,63 +37,25 @@ const index_js_1 = require('../utils/index.js');
  * </AvatarGroup>
  */
 exports.AvatarGroup = React.forwardRef((props, ref) => {
-  const maxLength = 99;
-  const {
-    children,
-    animated = false,
-    stacked = true,
-    maxIcons = 5,
-    iconSize = 'small',
-    countIconProps,
-    className,
-    ...rest
-  } = props;
-  const childrenArray = React.Children.toArray(children);
-  const childrenLength = childrenArray.length;
-  const getAvatarList = (count) => {
-    return childrenArray.slice(0, count).map((child) =>
-      React.cloneElement(child, {
-        status: undefined,
-        size: iconSize,
-      }),
-    );
-  };
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.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_js_1.Box,
-          {
-            ...countIconProps,
-            className: (0, classnames_1.default)(
-              'iui-avatar',
-              { [`iui-${iconSize}`]: iconSize !== 'medium' },
-              'iui-avatar-count',
-              countIconProps?.className,
-            ),
-          },
-          childrenLength <= maxLength
-            ? `${childrenLength - maxIcons}`
-            : `${maxLength}+`,
-        ),
-      ),
-  );
+    const maxLength = 99;
+    const { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
+    const childrenArray = React.Children.toArray(children);
+    const childrenLength = childrenArray.length;
+    const getAvatarList = (count) => {
+        return childrenArray.slice(0, count).map((child) => React.cloneElement(child, {
+            status: undefined,
+            size: iconSize,
+        }));
+    };
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.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_js_1.Box, { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps?.className) }, childrenLength <= maxLength
+                ? `${childrenLength - maxIcons}`
+                : `${maxLength}+`)))));
 });
 exports.default = exports.AvatarGroup;

package/cjs/core/Backdrop/Backdrop.js

@@ -1,23 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Backdrop = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 exports.Backdrop = React.forwardRef((props, ref) => {
-  const { isVisible = true, className, ...rest } = props;
-  return React.createElement(index_js_1.Box, {
-    className: (0, classnames_1.default)(
-      'iui-backdrop',
-      { 'iui-backdrop-visible': isVisible },
-      className,
-    ),
-    ref: ref,
-    ...rest,
-  });
+    const { isVisible = true, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
 });

package/cjs/core/Badge/Badge.js

@@ -1,31 +1,29 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Helper function that returns one of the preset badge color values.
  */
 const getBadgeColorValue = (color) => {
-  if (!color) {
-    return '';
-  }
-  return (0, index_js_1.isSoftBackground)(color)
-    ? index_js_1.SoftBackgrounds[color]
-    : color;
+    if (!color) {
+        return '';
+    }
+    return (0, index_js_1.isSoftBackground)(color) ? index_js_1.SoftBackgrounds[color] : color;
 };
 /**
  * Helper function that returns one of the preset badge status values.
  */
 const getStatusValue = (color) => {
-  const statuses = ['positive', 'negative', 'warning', 'informational'];
-  return color && statuses.includes(color) ? color : undefined;
+    const statuses = ['positive', 'negative', 'warning', 'informational'];
+    return color && statuses.includes(color) ? color : undefined;
 };
 /**
  * A colorful visual indicator for categorizing items.
@@ -35,31 +33,16 @@ const getStatusValue = (color) => {
  * <Badge backgroundColor="positive">Label</Badge>
  */
 exports.Badge = React.forwardRef((props, forwardedRef) => {
-  const { backgroundColor, style, className, children, ...rest } = props;
-  // choosing 'primary' status should result in data-iui-status equaling 'informational'
-  const reducedBackgroundColor =
-    backgroundColor === 'primary' ? 'informational' : backgroundColor;
-  const statusValue = getStatusValue(reducedBackgroundColor);
-  const _style =
-    reducedBackgroundColor && !statusValue
-      ? {
-          '--iui-badge-background-color': getBadgeColorValue(
-            reducedBackgroundColor,
-          ),
-          ...style,
+    const { backgroundColor, style, className, children, ...rest } = props;
+    // choosing 'primary' status should result in data-iui-status equaling 'informational'
+    const reducedBackgroundColor = backgroundColor === 'primary' ? 'informational' : backgroundColor;
+    const statusValue = getStatusValue(reducedBackgroundColor);
+    const _style = reducedBackgroundColor && !statusValue
+        ? {
+            '--iui-badge-background-color': getBadgeColorValue(reducedBackgroundColor),
+            ...style,
         }
-      : { ...style };
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'span',
-      className: (0, classnames_1.default)('iui-badge', className),
-      style: _style,
-      'data-iui-status': statusValue,
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+        : { ...style };
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-badge', className), style: _style, "data-iui-status": statusValue, ref: forwardedRef, ...rest }, children));
 });
 exports.default = exports.Badge;