@itwin/itwinui-react 3.4.2 → 3.6.0

package/cjs/core/Typography/Anchor.d.ts

@@ -1,3 +1,21 @@
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type AnchorProps = {
+    /**
+     * Whether the anchor links to an external site.
+     *
+     * When true, there will be an icon added at the end of the anchor text. This is useful
+     * to indicate that the link will open in a new tab.
+     *
+     * Not all external links should open in a new tab, so this prop should be used with caution.
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the anchor should be underlined in its idle state.
+     *
+     * By default, the anchor is underlined only on hover, or when using a high-contrast theme.
+     */
+    underline?: boolean;
+};
 /**
  * A consistently styled anchor component.
  *
@@ -7,9 +25,11 @@
  * @example
  * <Anchor href='/'>Home</Anchor>
  * <Anchor href='/projects'>Projects</Anchor>
+ * <Anchor href='/help' underline>Help</Anchor>
  *
  * @example
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-export declare const Anchor: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
+export declare const Anchor: PolymorphicForwardRefComponent<"a", AnchorProps>;
+export {};

package/cjs/core/Typography/Anchor.js

@@ -1,11 +1,40 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Anchor = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+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;
+});
+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.Anchor = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
+const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 /**
  * A consistently styled anchor component.
  *
@@ -15,9 +44,15 @@ const index_js_1 = require("../utils/index.js");
  * @example
  * <Anchor href='/'>Home</Anchor>
  * <Anchor href='/projects'>Projects</Anchor>
+ * <Anchor href='/help' underline>Help</Anchor>
  *
  * @example
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-exports.Anchor = index_js_1.polymorphic.a('iui-anchor');
+exports.Anchor = React.forwardRef((props, forwardedRef) => {
+    const { isExternal, underline, children, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'a', "data-iui-underline": underline ? 'true' : undefined, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-anchor', { 'iui-anchor-external': isExternal }, props.className) },
+        children,
+        props.target === '_blank' && (React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, " (opens in new tab)"))));
+});

package/cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -33,7 +33,7 @@ exports.VisuallyHidden = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Box_js_1 = require("../utils/components/Box.js");
+const index_js_1 = require("../utils/index.js");
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -45,6 +45,22 @@ const Box_js_1 = require("../utils/components/Box.js");
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 exports.VisuallyHidden = React.forwardRef((props, ref) => {
-    const { className, unhideOnFocus = true, ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
+    const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
+    // ShadowRoot is not supported on all elements, so we only use it for few common ones.
+    const children = !['div', 'span', 'p'].includes(asProp) ? (childrenProp) : (React.createElement(React.Fragment, null,
+        React.createElement(index_js_1.ShadowRoot, { css: css },
+            React.createElement("slot", null)),
+        childrenProp));
+    return (React.createElement(index_js_1.Box, { as: asProp, className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
+// ----------------------------------------------------------------------------
+const css = /* css */ `
+  :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
+    clip-path: inset(50%) !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    block-size: 1px !important;
+    inline-size: 1px !important;
+  }
+`;

package/cjs/core/utils/components/InputFlexContainer.d.ts

@@ -1,4 +1,6 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { IconProps } from '../../Icon/Icon.js';
+import type { IconButtonProps } from '../../Buttons/IconButton.js';
 export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
@@ -9,3 +11,26 @@ export type InputFlexContainerProps = {
  * @private
  */
 export declare const InputFlexContainer: PolymorphicForwardRefComponent<"div", InputFlexContainerProps>;
+/**
+ * Button inside InputFlexContainer that collapses the padding between the button and the input/textarea.
+ * @private
+ */
+export declare const InputFlexContainerButton: PolymorphicForwardRefComponent<"button", Omit<IconButtonProps, "styleType"> & {
+    /**
+     * Style of the button.
+     * Use 'borderless' to hide outline.
+     * @default 'borderless'
+     */
+    styleType?: IconButtonProps['styleType'];
+}>;
+/**
+ * Icon inside InputFlexContainer that collapses the padding between the icon and the input/textarea.
+ * @private
+ */
+export declare const InputFlexContainerIcon: PolymorphicForwardRefComponent<"span", Omit<IconProps, "padded"> & {
+    /**
+     * Option to add padding to the icon.
+     * @default true
+     */
+    padded?: IconProps['padded'];
+}>;

package/cjs/core/utils/components/InputFlexContainer.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputFlexContainer = void 0;
+exports.InputFlexContainerIcon = exports.InputFlexContainerButton = exports.InputFlexContainer = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -11,6 +11,8 @@ exports.InputFlexContainer = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_js_1 = require("./Box.js");
+const Icon_js_1 = require("../../Icon/Icon.js");
+const IconButton_js_1 = require("../../Buttons/IconButton.js");
 /**
  * Utility component for input container with display flex abilities.
  * @private
@@ -19,3 +21,19 @@ exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
     const { isDisabled, status, children, className, size, style, ...rest } = props;
     return (react_1.default.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('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));
 });
+/**
+ * Button inside InputFlexContainer that collapses the padding between the button and the input/textarea.
+ * @private
+ */
+exports.InputFlexContainerButton = react_1.default.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    return (react_1.default.createElement(IconButton_js_1.IconButton, { ref: ref, className: (0, classnames_1.default)('iui-input-flex-container-icon', className), styleType: 'borderless', ...rest }));
+});
+/**
+ * Icon inside InputFlexContainer that collapses the padding between the icon and the input/textarea.
+ * @private
+ */
+exports.InputFlexContainerIcon = react_1.default.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    return (react_1.default.createElement(Icon_js_1.Icon, { ref: ref, className: (0, classnames_1.default)('iui-input-flex-container-icon', className), padded: true, ...rest }));
+});

package/cjs/core/utils/components/LineClamp.d.ts

@@ -0,0 +1,5 @@
+import type { PolymorphicForwardRefComponent } from '../props.js';
+/** @private */
+export declare const LineClamp: PolymorphicForwardRefComponent<"div", {
+    lines?: number | undefined;
+}>;

package/cjs/core/utils/components/LineClamp.js

@@ -0,0 +1,49 @@
+"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;
+});
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineClamp = 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 React = __importStar(require("react"));
+const Box_js_1 = require("./Box.js");
+const ShadowRoot_js_1 = require("./ShadowRoot.js");
+/** @private */
+exports.LineClamp = React.forwardRef((props, forwardedRef) => {
+    const { lines, children, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { ref: forwardedRef, ...rest, style: { '--_iui-line-clamp': lines, ...props.style } },
+        React.createElement(ShadowRoot_js_1.ShadowRoot, { css: css },
+            React.createElement("slot", null)),
+        children));
+});
+const css = /* css */ `
+  :host {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: var(--_iui-line-clamp, 3);
+    -webkit-box-orient: vertical;
+  }
+`;

package/cjs/core/utils/components/ShadowRoot.d.ts

@@ -5,6 +5,7 @@ import * as React from 'react';
  *
  * @private
  */
-export declare const ShadowRoot: ({ children }: {
+export declare const ShadowRoot: ({ children, css, }: {
     children: React.ReactNode;
+    css?: string | undefined;
 }) => React.JSX.Element | null;

package/cjs/core/utils/components/ShadowRoot.js

@@ -32,24 +32,39 @@ const React = __importStar(require("react"));
 const ReactDOM = __importStar(require("react-dom"));
 const isBrowser = typeof document !== 'undefined';
 const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
 /**
  * Wrapper around `<template>` element that attaches shadow root to its parent
  * and moves its children into the shadow root.
  *
  * @private
  */
-const ShadowRoot = ({ children }) => {
+const ShadowRoot = ({ children, css, }) => {
     const [shadowRoot, setShadowRoot] = React.useState();
     const isFirstRender = useIsFirstRender();
+    const styleSheet = React.useRef();
     const attachShadowRef = React.useCallback((template) => {
         const parent = template?.parentElement;
         if (!template || !parent) {
             return;
         }
-        queueMicrotask(() => ReactDOM.flushSync(() => setShadowRoot(parent.shadowRoot || parent.attachShadow({ mode: 'open' }))));
-    }, []);
+        if (parent.shadowRoot) {
+            parent.shadowRoot.replaceChildren(); // Remove previous shadowroot content
+        }
+        queueMicrotask(() => {
+            const shadow = parent.shadowRoot || parent.attachShadow({ mode: 'open' });
+            if (css && supportsAdoptedStylesheets) {
+                styleSheet.current || (styleSheet.current = new CSSStyleSheet());
+                styleSheet.current.replaceSync(css);
+                shadow.adoptedStyleSheets = [styleSheet.current];
+            }
+            ReactDOM.flushSync(() => setShadowRoot(shadow));
+        });
+    }, [css]);
     if (!isBrowser) {
-        return React.createElement("template", { shadowrootmode: 'open' }, children);
+        return (React.createElement("template", { shadowrootmode: 'open' },
+            css && React.createElement("style", null, css),
+            children));
     }
     // In browsers that support DSD, the template will be automatically removed as soon as it's parsed.
     // To pass hydration, the first client render needs to emulate this browser behavior and return null.

package/cjs/core/utils/components/index.d.ts

@@ -11,3 +11,4 @@ export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
+export * from './LineClamp.js';

package/cjs/core/utils/components/index.js

@@ -31,3 +31,4 @@ __exportStar(require("./Box.js"), exports);
 __exportStar(require("./ButtonBase.js"), exports);
 __exportStar(require("./Portal.js"), exports);
 __exportStar(require("./ShadowRoot.js"), exports);
+__exportStar(require("./LineClamp.js"), exports);

package/cjs/core/utils/functions/polymorphic.d.ts

@@ -3,11 +3,13 @@ import type { PolymorphicForwardRefComponent } from '../props.js';
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
- * Can be called directly or as a property of the `Polymorphic` object.
+ * Can be called directly or as a property of the `polymorphic` object.
  * In both cases, returns a component that:
+ * - uses CSS-modules scoped classes
  * - supports `as` prop with default element
- * - forwards ref and rest props
- * - adds and merges css classes
+ * - forwards ref and spreads rest props
+ * - adds and merges CSS classes
+ * - adds tabIndex to interactive elements (Safari workaround)
  *
  * @example
  * const MyPolyDiv = polymorphic('my-poly-div');

package/cjs/core/utils/functions/polymorphic.js

@@ -31,6 +31,7 @@ exports.polymorphic = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const useGlobals_js_1 = require("../hooks/useGlobals.js");
@@ -38,9 +39,21 @@ const styles_js_1 = __importDefault(require("../../../styles.js"));
 const _base = (defaultElement) => {
     return (className, attrs) => {
         const Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {
-            const Element = as || 'div'; // eslint-disable-line
+            props = {
+                ...attrs,
+                ...props,
+                className: getScopedClassName((0, classnames_1.default)(className, attrs?.className, props.className)),
+            };
+            const Element = as || 'div';
+            // Add tabIndex to interactive elements if not already set.
+            // Workaround for Safari refusing to focus links/buttons/non-text inputs.
+            if (Element === 'button' ||
+                Element === 'a' ||
+                (Element === 'input' && props.type === 'checkbox')) {
+                props.tabIndex ?? (props.tabIndex = 0);
+            }
             (0, useGlobals_js_1.useGlobals)();
-            return (React.createElement(Element, { ref: ref, ...attrs, ...props, className: getScopedClassName((0, classnames_1.default)(className, attrs?.className, props.className)) }));
+            return React.createElement(Element, { ref: ref, ...props });
         });
         Comp.displayName = getDisplayNameFromClass(className);
         return Comp;
@@ -49,11 +62,13 @@ const _base = (defaultElement) => {
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
- * Can be called directly or as a property of the `Polymorphic` object.
+ * Can be called directly or as a property of the `polymorphic` object.
  * In both cases, returns a component that:
+ * - uses CSS-modules scoped classes
  * - supports `as` prop with default element
- * - forwards ref and rest props
- * - adds and merges css classes
+ * - forwards ref and spreads rest props
+ * - adds and merges CSS classes
+ * - adds tabIndex to interactive elements (Safari workaround)
  *
  * @example
  * const MyPolyDiv = polymorphic('my-poly-div');

package/cjs/core/utils/icons/Svg.js

@@ -6,4 +6,8 @@ exports.Svg = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const polymorphic_js_1 = require("../functions/polymorphic.js");
-exports.Svg = polymorphic_js_1.polymorphic.svg('', { viewBox: '0 0 16 16' });
+exports.Svg = polymorphic_js_1.polymorphic.svg('', {
+    viewBox: '0 0 16 16',
+    width: 16,
+    height: 16,
+});

package/cjs/core/utils/icons/SvgStatusError.js

@@ -32,6 +32,6 @@ const React = __importStar(require("react"));
 const Svg_js_1 = require("./Svg.js");
 const SvgStatusError = (props) => {
     return (React.createElement(Svg_js_1.Svg, { ...props },
-        React.createElement("path", { d: 'm8 0a8 8 0 1 0 8 8 8 8 0 0 0 -8-8zm1 12h-2v-2h2zm0-3h-2v-5h2z' })));
+        React.createElement("path", { d: 'M9 12H7v-2h2v2Zm0-3H7V4h2v5Zm2.314-9H4.686L0 4.686v6.628L4.686 16h6.628L16 11.314V4.686L11.314 0Z' })));
 };
 exports.SvgStatusError = SvgStatusError;

package/esm/core/Carousel/Carousel.d.ts

@@ -48,7 +48,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
                 ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
             }, "as" | "children" | "content" | "portal" | keyof {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -92,7 +92,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                  */
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -129,7 +129,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
                 ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
             }, "as" | "children" | "content" | "portal" | keyof {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -173,7 +173,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                  */
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/utils").Placement | undefined;
+                placement?: import("@floating-ui/core").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -15,7 +15,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -41,7 +41,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -78,7 +78,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -104,7 +104,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
+            placement?: import("@floating-ui/core").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {

package/esm/core/Dialog/Dialog.js

@@ -11,26 +11,28 @@ import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
 import { useMergedRefs, Box, Portal } from '../utils/index.js';
+import { Transition } from 'react-transition-group';
 const DialogComponent = React.forwardRef((props, ref) => {
     const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, portal = false, ...rest } = props;
     const dialogRootRef = React.useRef(null);
-    return (React.createElement(DialogContext.Provider, { value: {
-            isOpen,
-            onClose,
-            closeOnEsc,
-            closeOnExternalClick,
-            isDismissible,
-            preventDocumentScroll,
-            trapFocus,
-            setFocus,
-            isDraggable,
-            isResizable,
-            relativeTo,
-            dialogRootRef,
-            placement,
-        } },
-        React.createElement(Portal, { portal: portal },
-            React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: useMergedRefs(ref, dialogRootRef), ...rest }))));
+    return (React.createElement(Transition, { in: isOpen, timeout: { exit: 600 }, mountOnEnter: true, unmountOnExit: true },
+        React.createElement(DialogContext.Provider, { value: {
+                isOpen,
+                onClose,
+                closeOnEsc,
+                closeOnExternalClick,
+                isDismissible,
+                preventDocumentScroll,
+                trapFocus,
+                setFocus,
+                isDraggable,
+                isResizable,
+                relativeTo,
+                dialogRootRef,
+                placement,
+            } },
+            React.createElement(Portal, { portal: portal },
+                React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: useMergedRefs(ref, dialogRootRef), ...rest })))));
 });
 /**
  * Dialog component.

package/esm/core/Dialog/DialogContext.d.ts

@@ -3,6 +3,10 @@ import type { PortalProps } from '../utils/index.js';
 export type DialogContextProps = {
     /**
      * Flag whether dialog should be shown.
+     *
+     * It is recommended to directly pass the boolean condition to this prop instead of rendering the `Dialog`
+     * conditionally with `isOpen` hard-coded to `true`. One benefit of this is getting an exit animation.
+     *
      * @default false
      */
     isOpen?: boolean;

package/esm/core/Dialog/DialogMain.js

@@ -120,7 +120,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
                     }
                 }, onResizeEnd: setResizeStyle }))),
         children));
-    return (React.createElement(Transition, { in: isOpen, timeout: { exit: 600 }, 
+    return (React.createElement(Transition, { in: isOpen, appear: true, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {
             previousFocusedElement.current = dialogRef.current?.ownerDocument

package/esm/core/Dialog/DialogTitleBar.js

@@ -34,7 +34,7 @@ export const DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
             'iui-dialog-title-bar-filled': isDraggable,
         }), ref: ref, onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
         React.createElement(DialogTitleBarTitle, null, titleText),
-        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close', "data-iui-shift": 'right' },
             React.createElement(SvgClose, null)))))));
 }), {
     Title: DialogTitleBarTitle,

package/esm/core/InputGroup/InputGroup.d.ts

@@ -12,6 +12,10 @@ type InputGroupProps = {
     status?: 'positive' | 'warning' | 'negative';
     /**
      * Message below the group. Does not apply to 'inline' group.
+     *
+     * When `typeof message === "string"`, it is automatically wrapped with {@link StatusMessage}.
+     * If you are passing a non-string message that is not `<StatusMessage>`, you may need to wrap it with
+     * `<StatusMessage>` yourself for proper styling of `message`.
      */
     message?: React.ReactNode;
     /**

package/esm/core/InputGroup/InputGroup.js

@@ -24,11 +24,27 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
  * </InputGroup>
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
-    const { className, children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, labelProps, messageProps, innerProps, ...rest } = props;
+    const { className, children, disabled = false, displayStyle = 'default', label, status, required = false, labelProps, innerProps, message, svgIcon, messageProps, ...rest } = props;
     return (React.createElement(InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: cx('iui-input-group-wrapper', className), "data-iui-status": status, ...rest },
         label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
         React.createElement(Box, { as: 'div', ...innerProps, className: cx('iui-input-group', innerProps?.className) }, children),
-        (message || status || svgIcon) && (React.createElement(StatusMessage, { iconProps: {
-                'aria-hidden': true,
-            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message))));
+        React.createElement(BottomMessage, { message: message, status: status, svgIcon: svgIcon, displayStyle: displayStyle, messageProps: messageProps })));
 });
+// ------------------------------------------------------------------------------------------------
+/**
+ * @private
+ * - When `typeof message !== 'string'`, `message` is returned as-is (e.g. when `message=<StatusMessage />`).
+ * - Else, it is wrapped in a `<StatusMessage />`.
+ */
+const BottomMessage = (props) => {
+    const { message, status, svgIcon, displayStyle, messageProps } = props;
+    if (message && typeof message !== 'string') {
+        return message;
+    }
+    if (message || status || svgIcon) {
+        return (React.createElement(StatusMessage, { iconProps: {
+                'aria-hidden': true,
+            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message));
+    }
+    return undefined;
+};