@itwin/itwinui-react 1.40.1 → 1.43.0

package/esm/core/ErrorPage/ErrorPage.js

@@ -31,6 +31,8 @@ import Svg500 from '@itwin/itwinui-illustrations-react/cjs/illustrations/500';
 import Svg502 from '@itwin/itwinui-illustrations-react/cjs/illustrations/502';
 import Svg503 from '@itwin/itwinui-illustrations-react/cjs/illustrations/503';
 import SvgError from '@itwin/itwinui-illustrations-react/cjs/illustrations/Error';
+import SvgRedirect from '@itwin/itwinui-illustrations-react/cjs/illustrations/Redirect';
+import SvgTimedOut from '@itwin/itwinui-illustrations-react/cjs/illustrations/TimedOut';
 import React from 'react';
 import { Button } from '../Buttons/Button';
 import { useTheme } from '../utils';
@@ -44,9 +46,19 @@ import '@itwin/itwinui-css/css/non-ideal-state.css';
 export var ErrorPage = function (props) {
     var errorType = props.errorType, errorName = props.errorName, errorMessage = props.errorMessage, primaryButtonHandle = props.primaryButtonHandle, primaryButtonLabel = props.primaryButtonLabel, secondaryButtonHandle = props.secondaryButtonHandle, secondaryButtonLabel = props.secondaryButtonLabel, translatedErrorMessages = props.translatedErrorMessages, className = props.className, rest = __rest(props, ["errorType", "errorName", "errorMessage", "primaryButtonHandle", "primaryButtonLabel", "secondaryButtonHandle", "secondaryButtonLabel", "translatedErrorMessages", "className"]);
     useTheme();
-    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', unauthorized: 'Unauthorized' }, translatedErrorMessages);
+    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', redirect: 'Redirect', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', timedOut: 'Timed out', unauthorized: 'Unauthorized' }, translatedErrorMessages);
     function getErrorIcon() {
         switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return React.createElement(SvgRedirect, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '401': {
                 return React.createElement(Svg401, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -56,6 +68,10 @@ export var ErrorPage = function (props) {
             case '404': {
                 return React.createElement(Svg404, { className: 'iui-non-ideal-state-illustration' });
             }
+            case '408':
+            case '504': {
+                return React.createElement(SvgTimedOut, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '500': {
                 return React.createElement(Svg500, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -76,6 +92,16 @@ export var ErrorPage = function (props) {
             return errorName;
         }
         switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return defaultErrorMessages.redirect || '';
+            }
             case '401': {
                 return defaultErrorMessages.unauthorized;
             }
@@ -85,6 +111,10 @@ export var ErrorPage = function (props) {
             case '404': {
                 return defaultErrorMessages.pageNotFound;
             }
+            case '408':
+            case '504': {
+                return defaultErrorMessages.timedOut || '';
+            }
             case '500': {
                 return defaultErrorMessages.internalServerError;
             }

package/esm/core/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { StylingProps } from '../utils';
 import '@itwin/itwinui-css/css/footer.css';
 export declare type TitleTranslations = {
@@ -19,6 +19,11 @@ export declare type FooterProps = {
      * Provide localized strings.
      */
     translatedTitles?: TitleTranslations;
+    /**
+     * Custom footer content. If provided, it will render only what you passed.
+     * Use `defaultFooterElements` to get the default footer elements.
+     */
+    children?: React.ReactNode;
 } & StylingProps;
 export declare type FooterElement = {
     /**
@@ -34,6 +39,7 @@ export declare type FooterElement = {
      */
     key?: keyof TitleTranslations | 'copyright' | (string & Record<never, never>);
 };
+export declare const defaultFooterElements: FooterElement[];
 /**
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
@@ -47,5 +53,13 @@ export declare type FooterElement = {
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-export declare const Footer: (props: FooterProps) => JSX.Element;
+export declare const Footer: ((props: FooterProps) => JSX.Element) & {
+    List: (props: Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
+        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    }) => JSX.Element;
+    Item: (props: Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & {
+        ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+    }) => JSX.Element;
+    Separator: (props: import("./FooterSeparator").FooterSeparatorProps) => JSX.Element;
+};
 export default Footer;

package/esm/core/Footer/Footer.js

@@ -37,6 +37,9 @@ import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/footer.css';
+import { FooterItem } from './FooterItem';
+import { FooterSeparator } from './FooterSeparator';
+import { FooterList } from './FooterList';
 var footerTranslations = {
     cookies: 'Cookies',
     legalNotices: 'Legal notices',
@@ -44,6 +47,37 @@ var footerTranslations = {
     termsOfService: 'Terms of service',
     termsOfUse: 'Terms of use',
 };
+export var defaultFooterElements = [
+    {
+        key: 'copyright',
+        title: "\u00A9 ".concat(new Date().getFullYear(), " Bentley Systems, Incorporated"),
+    },
+    {
+        key: 'termsOfService',
+        title: footerTranslations.termsOfService,
+        url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
+    },
+    {
+        key: 'privacy',
+        title: footerTranslations.privacy,
+        url: 'https://www.bentley.com/en/privacy-policy',
+    },
+    {
+        key: 'termsOfUse',
+        title: footerTranslations.termsOfUse,
+        url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
+    },
+    {
+        key: 'cookies',
+        title: footerTranslations.cookies,
+        url: 'https://www.bentley.com/en/cookie-policy',
+    },
+    {
+        key: 'legalNotices',
+        title: footerTranslations.legalNotices,
+        url: 'https://connect.bentley.com/Legal',
+    },
+];
 /**
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
@@ -57,53 +91,32 @@ var footerTranslations = {
  * @example <caption>Changing a url</caption>
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
-export var Footer = function (props) {
-    var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
+export var Footer = Object.assign(function (props) {
+    var children = props.children, customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["children", "customElements", "translatedTitles", "className"]);
     useTheme();
     var titles = __assign(__assign({}, footerTranslations), translatedTitles);
-    var defaultElements = [
-        {
-            key: 'copyright',
-            title: "\u00A9 ".concat(new Date().getFullYear(), " Bentley Systems, Incorporated"),
-        },
-        {
-            key: 'termsOfService',
-            title: titles.termsOfService,
-            url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
-        },
-        {
-            key: 'privacy',
-            title: titles.privacy,
-            url: 'https://www.bentley.com/en/privacy-policy',
-        },
-        {
-            key: 'termsOfUse',
-            title: titles.termsOfUse,
-            url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
-        },
-        {
-            key: 'cookies',
-            title: titles.cookies,
-            url: 'https://www.bentley.com/en/cookie-policy',
-        },
-        {
-            key: 'legalNotices',
-            title: titles.legalNotices,
-            url: 'https://connect.bentley.com/Legal',
-        },
-    ];
-    var elements = defaultElements;
+    var translatedElements = defaultFooterElements.map(function (element) {
+        if (element.key && titles.hasOwnProperty(element.key)) {
+            var key = element.key;
+            return __assign(__assign({}, element), { title: titles[key] });
+        }
+        return element;
+    });
+    var elements = translatedElements;
     if (customElements) {
         elements =
             typeof customElements === 'function'
-                ? customElements(defaultElements)
-                : __spreadArray(__spreadArray([], defaultElements, true), customElements, true);
+                ? customElements(translatedElements)
+                : __spreadArray(__spreadArray([], translatedElements, true), customElements, true);
     }
-    return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest),
-        React.createElement("ul", null, elements.map(function (element, index) {
-            return (React.createElement("li", { key: element.key || "".concat(element.title, "-").concat(index) },
-                index > 0 && React.createElement("span", { className: 'iui-separator' }),
-                element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
-        }))));
-};
+    return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest), children ? (children) : (React.createElement(FooterList, null, elements.map(function (element, index) {
+        return (React.createElement(React.Fragment, { key: element.key || "".concat(element.title, "-").concat(index) },
+            index > 0 && React.createElement(FooterSeparator, null),
+            React.createElement(FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));
+    })))));
+}, {
+    List: FooterList,
+    Item: FooterItem,
+    Separator: FooterSeparator,
+});
 export default Footer;

package/esm/core/Footer/FooterItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/footer.css';
+export declare type FooterItemProps = React.ComponentPropsWithRef<'li'>;
+/**
+ * Footer item. Recommended to use inside `Footer.List`.
+ */
+export declare const FooterItem: (props: FooterItemProps) => JSX.Element;
+export default FooterItem;

package/esm/core/Footer/FooterItem.js

@@ -0,0 +1,39 @@
+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 { useTheme } from '../utils';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/footer.css';
+/**
+ * Footer item. Recommended to use inside `Footer.List`.
+ */
+export var FooterItem = function (props) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("li", __assign({ className: cx('iui-legal-footer-item', className) }, rest), children));
+};
+export default FooterItem;

package/esm/core/Footer/FooterList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/footer.css';
+export declare type FooterListProps = React.ComponentPropsWithRef<'ul'>;
+/**
+ * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
+ */
+export declare const FooterList: (props: FooterListProps) => JSX.Element;
+export default FooterList;

package/esm/core/Footer/FooterList.js

@@ -0,0 +1,39 @@
+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 { useTheme } from '../utils';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/footer.css';
+/**
+ * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
+ */
+export var FooterList = function (props) {
+    var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
+    useTheme();
+    return (React.createElement("ul", __assign({ className: cx('iui-legal-footer-list', className) }, rest), children));
+};
+export default FooterList;

package/esm/core/Footer/FooterSeparator.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/footer.css';
+export declare type FooterSeparatorProps = Omit<React.ComponentPropsWithRef<'li'>, 'children'>;
+/**
+ * Footer separator. Recommended to use inside `Footer.List`.
+ */
+export declare const FooterSeparator: (props: FooterSeparatorProps) => JSX.Element;
+export default FooterSeparator;

package/esm/core/Footer/FooterSeparator.js

@@ -0,0 +1,39 @@
+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 { useTheme } from '../utils';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/footer.css';
+/**
+ * Footer separator. Recommended to use inside `Footer.List`.
+ */
+export var FooterSeparator = function (props) {
+    var className = props.className, rest = __rest(props, ["className"]);
+    useTheme();
+    return (React.createElement("li", __assign({ className: cx('iui-legal-footer-separator', className), "aria-hidden": true }, rest)));
+};
+export default FooterSeparator;

package/esm/core/Footer/index.d.ts

@@ -1,4 +1,4 @@
-export { Footer } from './Footer';
+export { Footer, defaultFooterElements } from './Footer';
 export type { FooterElement, FooterProps, TitleTranslations } from './Footer';
 declare const _default: "./Footer";
 export default _default;

package/esm/core/Footer/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { Footer } from './Footer';
+export { Footer, defaultFooterElements } from './Footer';
 export default './Footer';

package/esm/core/Modal/Modal.d.ts

@@ -1,12 +1,8 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
+import { DialogMainProps } from '../Dialog';
 export declare type ModalProps = {
-    /**
-     * Flag whether modal should be shown.
-     * @default false
-     */
-    isOpen?: boolean;
     /**
      * Modal title.
      */
@@ -45,16 +41,11 @@ export declare type ModalProps = {
      * @default document
      */
     ownerDocument?: Document;
-    /**
-     * Type of the modal.
-     * @default 'default'
-     */
-    styleType?: 'default' | 'fullPage';
     /**
      * Content of the modal.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+} & Pick<DialogMainProps, 'isOpen' | 'styleType'> & Omit<CommonProps, 'title'>;
 /**
  * Modal component which can wrap any content.
  * @example
@@ -63,9 +54,9 @@ export declare type ModalProps = {
  *   title='My modal'
  *   onClose={onClose}
  * >
- *   <div>
+ *   <ModalContent>
  *     Here is my modal content
- *   </div>
+ *   </ModalContent>
  *   <ModalButtonBar>
  *     <Button styleType='high-visibility'>
  *       Primary button

package/esm/core/Modal/Modal.js

@@ -26,12 +26,9 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import ReactDOM from 'react-dom';
-import cx from 'classnames';
-import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
-import { useTheme, getContainer, getDocument, FocusTrap, } from '../utils';
+import { useTheme, getContainer, getDocument } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
-import { IconButton } from '../Buttons/IconButton';
-import { CSSTransition } from 'react-transition-group';
+import { Dialog } from '../Dialog';
 /**
  * Modal component which can wrap any content.
  * @example
@@ -40,9 +37,9 @@ import { CSSTransition } from 'react-transition-group';
  *   title='My modal'
  *   onClose={onClose}
  * >
- *   <div>
+ *   <ModalContent>
  *     Here is my modal content
- *   </div>
+ *   </ModalContent>
  *   <ModalButtonBar>
  *     <Button styleType='high-visibility'>
  *       Primary button
@@ -54,72 +51,13 @@ import { CSSTransition } from 'react-transition-group';
  * </Modal>
  */
 export var Modal = function (props) {
-    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.styleType, styleType = _e === void 0 ? 'default' : _e, _f = props.modalRootId, modalRootId = _f === void 0 ? 'iui-react-portal-container' : _f, _g = props.ownerDocument, ownerDocument = _g === void 0 ? getDocument() : _g, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "styleType", "modalRootId", "ownerDocument"]);
+    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? getDocument() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "children", "modalRootId", "ownerDocument"]);
     useTheme();
     var container = getContainer(modalRootId, ownerDocument);
-    var overlayRef = React.useRef(null);
-    var originalBodyOverflow = React.useRef('');
-    var previousFocusedElement = React.useRef();
-    // Give focus to overlay for key handling to work.
-    React.useLayoutEffect(function () {
-        var _a, _b;
-        if (isOpen) {
-            previousFocusedElement.current = document.activeElement;
-            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else {
-            (_b = previousFocusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        var modalOverlayRef = overlayRef.current;
-        return function () {
-            var _a;
-            (modalOverlayRef === null || modalOverlayRef === void 0 ? void 0 : modalOverlayRef.contains(document.activeElement)) &&
-                ((_a = previousFocusedElement.current) === null || _a === void 0 ? void 0 : _a.focus());
-        };
-    }, [isOpen]);
-    React.useEffect(function () {
-        if (!ownerDocument) {
-            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, ownerDocument]);
-    var handleKeyDown = function (event) {
-        // Prevents React from resetting its properties
-        event.persist();
-        if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
-            onClose(event);
-        }
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
-    };
-    var handleMouseDown = function (event) {
-        // Prevents React from resetting its properties
-        event.persist();
-        if (event.target !== overlayRef.current) {
-            return;
-        }
-        if (isDismissible && closeOnExternalClick && onClose) {
-            onClose(event);
-        }
-    };
-    return !!container ? (ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
-        React.createElement(FocusTrap, null,
-            React.createElement("div", __assign({ className: cx('iui-dialog-backdrop', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-                React.createElement("div", { className: 'iui-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                    React.createElement("div", { className: 'iui-dialog-title-bar' },
-                        React.createElement("div", { className: 'iui-dialog-title' }, title),
-                        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                            React.createElement(SvgClose, null)))),
-                    children)))), container)) : (React.createElement(React.Fragment, null));
+    return !!container ? (ReactDOM.createPortal(React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true },
+        React.createElement(Dialog.Backdrop, null),
+        React.createElement(Dialog.Main, __assign({ "aria-modal": true }, rest),
+            React.createElement(Dialog.TitleBar, { titleText: title }),
+            children)), container)) : (React.createElement(React.Fragment, null));
 };
 export default Modal;

package/esm/core/Modal/ModalButtonBar.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type ModalButtonBarProps = {
     /**
      * Buttons in the modal bar.
@@ -10,5 +9,5 @@ export declare type ModalButtonBarProps = {
 /**
  * Container for Buttons in modal.
  */
-export declare const ModalButtonBar: (props: ModalButtonBarProps) => JSX.Element;
+export declare const ModalButtonBar: React.ForwardRefExoticComponent<Pick<import("../Dialog/DialogButtonBar").DialogButtonBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 export default ModalButtonBar;

package/esm/core/Modal/ModalButtonBar.js

@@ -1,39 +1,6 @@
-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';
+import { DialogButtonBar } from '../Dialog/DialogButtonBar';
 /**
  * Container for Buttons in modal.
  */
-export var ModalButtonBar = function (props) {
-    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) }, rest), children));
-};
+export var ModalButtonBar = DialogButtonBar;
 export default ModalButtonBar;

package/esm/core/Modal/ModalContent.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type ModalContentProps = {
     /**
      * Main content in the `Modal`.
@@ -10,5 +9,5 @@ export declare type ModalContentProps = {
 /**
  * Container for content in `Modal`.
  */
-export declare const ModalContent: (props: ModalContentProps) => JSX.Element;
+export declare const ModalContent: React.ForwardRefExoticComponent<Pick<import("../Dialog/DialogContent").DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 export default ModalContent;