@itwin/itwinui-react 1.42.0 → 1.44.0

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+import { DialogContextProps } from './DialogContext';
+export declare type DialogProps = {
+    /**
+     * Dialog content.
+     */
+    children: React.ReactNode;
+} & DialogContextProps;
+/**
+ * Dialog component.
+ * @example
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   trapFocus
+ *   preventDocumentScroll
+ * >
+ *   <Dialog.Backdrop />
+ *   <Dialog.Main aria-modal>
+ *    <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
+ *    <Dialog.Content>
+ *      Here is my dialog content
+ *    </Dialog.Content>
+ *    <Dialog.ButtonBar>
+ *      <Button styleType='high-visibility'>Confirm</Button>
+ *      <Button>Close</Button>
+ *    </Dialog.ButtonBar>
+ *   </Dialog.Main>
+ * </Dialog>
+ */
+export declare const Dialog: ((props: DialogProps) => JSX.Element) & {
+    Backdrop: React.ForwardRefExoticComponent<Pick<import("./DialogBackdrop").DialogBackdropProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible" | "isDismissible" | "closeOnExternalClick"> & React.RefAttributes<HTMLDivElement>>;
+    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain").DialogMainProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "styleType" | "isOpen" | "isDismissible" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll"> & React.RefAttributes<HTMLDivElement>>;
+    TitleBar: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBar").DialogTitleBarProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isDismissible" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
+        Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+    };
+    Content: React.ForwardRefExoticComponent<Pick<import("./DialogContent").DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+    ButtonBar: React.ForwardRefExoticComponent<Pick<import("./DialogButtonBar").DialogButtonBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+};
+export default Dialog;

package/esm/core/Dialog/Dialog.js

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+import { DialogTitleBar } from './DialogTitleBar';
+import { DialogContent } from './DialogContent';
+import { DialogBackdrop } from './DialogBackdrop';
+import { DialogContext } from './DialogContext';
+import { DialogButtonBar } from './DialogButtonBar';
+import DialogMain from './DialogMain';
+/**
+ * Dialog component.
+ * @example
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   trapFocus
+ *   preventDocumentScroll
+ * >
+ *   <Dialog.Backdrop />
+ *   <Dialog.Main aria-modal>
+ *    <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
+ *    <Dialog.Content>
+ *      Here is my dialog content
+ *    </Dialog.Content>
+ *    <Dialog.ButtonBar>
+ *      <Button styleType='high-visibility'>Confirm</Button>
+ *      <Button>Close</Button>
+ *    </Dialog.ButtonBar>
+ *   </Dialog.Main>
+ * </Dialog>
+ */
+export var Dialog = Object.assign(function (props) {
+    var children = props.children, _a = props.trapFocus, trapFocus = _a === void 0 ? false : _a, _b = props.preventDocumentScroll, preventDocumentScroll = _b === void 0 ? false : _b, _c = props.isOpen, isOpen = _c === void 0 ? false : _c, _d = props.isDismissible, isDismissible = _d === void 0 ? true : _d, _e = props.closeOnEsc, closeOnEsc = _e === void 0 ? true : _e, _f = props.closeOnExternalClick, closeOnExternalClick = _f === void 0 ? false : _f, onClose = props.onClose;
+    return (React.createElement(DialogContext.Provider, { value: {
+            isOpen: isOpen,
+            onClose: onClose,
+            closeOnEsc: closeOnEsc,
+            closeOnExternalClick: closeOnExternalClick,
+            isDismissible: isDismissible,
+            preventDocumentScroll: preventDocumentScroll,
+            trapFocus: trapFocus,
+        } }, children));
+}, {
+    Backdrop: DialogBackdrop,
+    Main: DialogMain,
+    TitleBar: DialogTitleBar,
+    Content: DialogContent,
+    ButtonBar: DialogButtonBar,
+});
+export default Dialog;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BackdropProps } from '../Backdrop';
+import { DialogContextProps } from './DialogContext';
+export declare type DialogBackdropProps = BackdropProps & Pick<DialogContextProps, 'onClose' | 'isDismissible' | 'closeOnExternalClick'>;
+/**
+ * Backdrop component for dialog. Recommended to be used with `Dialog`
+ * then its visibility is being controlled by dialog's `isOpen` prop.
+ * @example
+ * <Dialog.Backdrop />
+ */
+export declare const DialogBackdrop: React.ForwardRefExoticComponent<Pick<DialogBackdropProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible" | "isDismissible" | "closeOnExternalClick"> & React.RefAttributes<HTMLDivElement>>;
+export default DialogBackdrop;

package/esm/core/Dialog/DialogBackdrop.js

@@ -0,0 +1,55 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { Backdrop } from '../Backdrop';
+import { useMergedRefs } from '../utils';
+import { useDialogContext } from './DialogContext';
+/**
+ * Backdrop component for dialog. Recommended to be used with `Dialog`
+ * then its visibility is being controlled by dialog's `isOpen` prop.
+ * @example
+ * <Dialog.Backdrop />
+ */
+export var DialogBackdrop = React.forwardRef(function (props, ref) {
+    var dialogContext = useDialogContext();
+    var _a = props.isVisible, isVisible = _a === void 0 ? dialogContext.isOpen : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? dialogContext.isDismissible : _b, _c = props.onClose, onClose = _c === void 0 ? dialogContext.onClose : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? dialogContext.closeOnExternalClick : _d, onMouseDown = props.onMouseDown, rest = __rest(props, ["isVisible", "isDismissible", "onClose", "closeOnExternalClick", "onMouseDown"]);
+    var backdropRef = React.useRef(null);
+    var refs = useMergedRefs(backdropRef, ref);
+    var handleMouseDown = function (event) {
+        // Prevents React from resetting its properties
+        event.persist();
+        if (event.target !== backdropRef.current) {
+            return;
+        }
+        if (isDismissible && closeOnExternalClick && onClose) {
+            onClose(event);
+        }
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    };
+    return (React.createElement(Backdrop, __assign({ isVisible: isVisible, ref: refs, onMouseDown: handleMouseDown }, rest)));
+});
+export default DialogBackdrop;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+export declare type DialogButtonBarProps = {
+    /**
+     * Buttons in the dialog bar.
+     */
+    children: React.ReactNode;
+} & React.ComponentPropsWithRef<'div'>;
+/**
+ * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.ButtonBar>
+ *   <Button styleType='high-visibility'>Confirm</Button>
+ *   <Button>Close</Button>
+ * </Dialog.ButtonBar>
+ */
+export declare const DialogButtonBar: React.ForwardRefExoticComponent<Pick<DialogButtonBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export default DialogButtonBar;

package/esm/core/Dialog/DialogButtonBar.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
+/**
+ * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.ButtonBar>
+ *   <Button styleType='high-visibility'>Confirm</Button>
+ *   <Button>Close</Button>
+ * </Dialog.ButtonBar>
+ */
+export var DialogButtonBar = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-dialog-button-bar', className), ref: ref }, rest), children));
+});
+export default DialogButtonBar;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+export declare type DialogContentProps = {
+    /**
+     * Main content in the `Dialog`.
+     */
+    children: React.ReactNode;
+} & React.ComponentPropsWithRef<'div'>;
+/**
+ * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.Content>
+ *   My dialog content
+ * </Dialog.Content>
+ */
+export declare const DialogContent: React.ForwardRefExoticComponent<Pick<DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export default DialogContent;

package/esm/core/Dialog/DialogContent.js

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
+/**
+ * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.Content>
+ *   My dialog content
+ * </Dialog.Content>
+ */
+export var DialogContent = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-dialog-content', className), ref: ref }, rest), children));
+});
+export default DialogContent;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+export declare type DialogContextProps = {
+    /**
+     * Flag whether dialog should be shown.
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Handler that is called when dialog is closed.
+     */
+    onClose?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Flag whether dialog is dismissible. If false, you can't close it.
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * Flag whether dialog should be closed on backdrop press.
+     * @default false
+     */
+    closeOnExternalClick?: boolean;
+    /**
+     * Flag whether dialog should be closed on Escape key press.
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Traps the focus inside the dialog. This is useful when the dialog is modal.
+     * @default false
+     */
+    trapFocus?: boolean;
+    /**
+     * Prevents body from being scrollable. This is useful when the dialog is modal.
+     * @default false
+     */
+    preventDocumentScroll?: boolean;
+};
+export declare const DialogContext: React.Context<DialogContextProps | undefined>;
+export declare const useDialogContext: () => DialogContextProps;

package/esm/core/Dialog/DialogContext.js

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+export var DialogContext = React.createContext(undefined);
+export var useDialogContext = function () {
+    return React.useContext(DialogContext) || {};
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+import { DialogContextProps } from './DialogContext';
+export declare type DialogMainProps = {
+    /**
+     * Type of the dialog.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'fullPage';
+    /**
+     * Content of the dialog.
+     */
+    children: React.ReactNode;
+} & Omit<DialogContextProps, 'closeOnExternalClick'> & React.ComponentPropsWithRef<'div'>;
+/**
+ * Dialog component which can wrap any content.
+ * @example
+ * <Dialog.Main>
+ *   <Dialog.TitleBar>
+ *     My dialog title
+ *   </Dialog.TitleBar>
+ *   <Dialog.Content>
+ *     Here is my dialog content
+ *   </Dialog.Content>
+ *   <Dialog.ButtonBar>
+ *     <Button styleType='high-visibility'>
+ *       Primary button
+ *     </Button>
+ *     <Button>
+ *       Secondary button
+ *     </Button>
+ *   </Dialog.ButtonBar>
+ * </Dialog.Main>
+ */
+export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "styleType" | "isOpen" | "isDismissible" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll"> & React.RefAttributes<HTMLDivElement>>;
+export default DialogMain;

package/esm/core/Dialog/DialogMain.js

@@ -0,0 +1,114 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { FocusTrap, useMergedRefs, useTheme } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
+import { useDialogContext } from './DialogContext';
+import { CSSTransition } from 'react-transition-group';
+/**
+ * Dialog component which can wrap any content.
+ * @example
+ * <Dialog.Main>
+ *   <Dialog.TitleBar>
+ *     My dialog title
+ *   </Dialog.TitleBar>
+ *   <Dialog.Content>
+ *     Here is my dialog content
+ *   </Dialog.Content>
+ *   <Dialog.ButtonBar>
+ *     <Button styleType='high-visibility'>
+ *       Primary button
+ *     </Button>
+ *     <Button>
+ *       Secondary button
+ *     </Button>
+ *   </Dialog.ButtonBar>
+ * </Dialog.Main>
+ */
+export var DialogMain = React.forwardRef(function (props, ref) {
+    var dialogContext = useDialogContext();
+    var className = props.className, children = props.children, _a = props.styleType, styleType = _a === void 0 ? 'default' : _a, _b = props.isOpen, isOpen = _b === void 0 ? dialogContext.isOpen : _b, _c = props.isDismissible, isDismissible = _c === void 0 ? dialogContext.isDismissible : _c, _d = props.onClose, onClose = _d === void 0 ? dialogContext.onClose : _d, _e = props.closeOnEsc, closeOnEsc = _e === void 0 ? dialogContext.closeOnEsc : _e, _f = props.trapFocus, trapFocus = _f === void 0 ? dialogContext.trapFocus : _f, _g = props.preventDocumentScroll, preventDocumentScroll = _g === void 0 ? dialogContext.preventDocumentScroll : _g, onKeyDown = props.onKeyDown, rest = __rest(props, ["className", "children", "styleType", "isOpen", "isDismissible", "onClose", "closeOnEsc", "trapFocus", "preventDocumentScroll", "onKeyDown"]);
+    useTheme();
+    var dialogRef = React.useRef(null);
+    var refs = useMergedRefs(dialogRef, ref);
+    // Focuses dialog when opened and brings back focus to the previously focused element when closed.
+    var previousFocusedElement = React.useRef();
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (isOpen) {
+            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
+            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else {
+            (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        var ref = dialogRef.current;
+        return function () {
+            var _a;
+            (ref === null || ref === void 0 ? void 0 : ref.contains(document.activeElement)) &&
+                ((_a = previousFocusedElement.current) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+    }, [isOpen]);
+    // Prevents document from scrolling when the dialog is open.
+    var originalBodyOverflow = React.useRef('');
+    React.useEffect(function () {
+        var _a;
+        var ownerDocument = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument;
+        if (!ownerDocument || !preventDocumentScroll) {
+            return;
+        }
+        if (isOpen) {
+            originalBodyOverflow.current = ownerDocument.body.style.overflow;
+            ownerDocument.body.style.overflow = 'hidden';
+        }
+        else {
+            ownerDocument.body.style.overflow = originalBodyOverflow.current;
+        }
+        return function () {
+            ownerDocument.body.style.overflow = originalBodyOverflow.current;
+        };
+    }, [isOpen, preventDocumentScroll]);
+    var handleKeyDown = function (event) {
+        // Prevents React from resetting its properties
+        event.persist();
+        if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
+            onClose(event);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    var content = (React.createElement("div", __assign({ className: cx('iui-dialog', {
+            'iui-dialog-default': styleType === 'default',
+            'iui-dialog-full-page': styleType === 'fullPage',
+            'iui-dialog-visible': isOpen,
+        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1 }, rest), children));
+    return (React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
+        React.createElement(React.Fragment, null,
+            trapFocus && React.createElement(FocusTrap, null, content),
+            !trapFocus && content)));
+});
+export default DialogMain;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+import { DialogContextProps } from './DialogContext';
+export declare type DialogTitleBarProps = {
+    /**
+     * Dialog title bar content. If passed, then `title` prop is ignored.
+     */
+    children?: React.ReactNode;
+    /**
+     * Dialog title.
+     */
+    titleText?: React.ReactNode;
+} & Pick<DialogContextProps, 'isDismissible' | 'onClose'> & React.ComponentPropsWithRef<'div'>;
+/**
+ * Dialog title bar. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.TitleBar title='My dialog title' />
+ * @example
+ * <Dialog.TitleBar>
+ *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
+ *   <IconButton
+ *     size='small'
+ *     styleType='borderless'
+ *     onClick={onClose}
+ *     aria-label='Close'
+ *   >
+ *     <SvgClose />
+ *   </IconButton>
+ * </Dialog.TitleBar>
+ */
+export declare const DialogTitleBar: React.ForwardRefExoticComponent<Pick<DialogTitleBarProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isDismissible" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
+    Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+};
+export default DialogTitleBar;

package/esm/core/Dialog/DialogTitleBar.js

@@ -0,0 +1,63 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
+import { useTheme } from '../utils';
+import { IconButton } from '../Buttons';
+import '@itwin/itwinui-css/css/dialog.css';
+import { useDialogContext } from './DialogContext';
+import { DialogTitleBarTitle } from './DialogTitleBarTitle';
+/**
+ * Dialog title bar. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.TitleBar title='My dialog title' />
+ * @example
+ * <Dialog.TitleBar>
+ *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
+ *   <IconButton
+ *     size='small'
+ *     styleType='borderless'
+ *     onClick={onClose}
+ *     aria-label='Close'
+ *   >
+ *     <SvgClose />
+ *   </IconButton>
+ * </Dialog.TitleBar>
+ */
+export var DialogTitleBar = Object.assign(React.forwardRef(function (props, ref) {
+    var dialogContext = useDialogContext();
+    var children = props.children, titleText = props.titleText, _a = props.isDismissible, isDismissible = _a === void 0 ? dialogContext.isDismissible : _a, _b = props.onClose, onClose = _b === void 0 ? dialogContext.onClose : _b, className = props.className, rest = __rest(props, ["children", "titleText", "isDismissible", "onClose", "className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-dialog-title-bar', className), ref: ref }, 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' },
+            React.createElement(SvgClose, null)))))));
+}), {
+    Title: DialogTitleBarTitle,
+});
+export default DialogTitleBar;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
+export declare type DialogTitleBarTitleProps = {
+    /**
+     * Dialog title content.
+     */
+    children: React.ReactNode;
+} & React.ComponentPropsWithRef<'div'>;
+/**
+ * Dialog title bar. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
+ */
+export declare const DialogTitleBarTitle: React.ForwardRefExoticComponent<Pick<DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export default DialogTitleBarTitle;

package/esm/core/Dialog/DialogTitleBarTitle.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
+/**
+ * Dialog title bar. Recommended to be used as a child of `Dialog`.
+ * @example
+ * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
+ */
+export var DialogTitleBarTitle = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-dialog-title', className), ref: ref }, rest), children));
+});
+export default DialogTitleBarTitle;