@itwin/itwinui-react 1.40.1 → 1.43.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## [1.43.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.42.0...v1.43.0) (2022-08-17)
+
+### What's new
+
+* **Footer:** Allows to use composition to customize Footer as you wish ([#754](https://www.github.com/iTwin/iTwinUI-react/issues/754)) ([48dfe52](https://www.github.com/iTwin/iTwinUI-react/commit/48dfe524f4ac45a81cd98504f38c50420f47664a))
+* **Slider:** Adding vertical orientation support ([#747](https://www.github.com/iTwin/iTwinUI-react/issues/747)) ([18cb893](https://www.github.com/iTwin/iTwinUI-react/commit/18cb89317118081ab425606f5679be56e1b60552))
+* **Table:** Style `DropdownMenu` inside of `ActionColumn` in `Table` ([#756](https://www.github.com/iTwin/iTwinUI-react/issues/756)) ([1116369](https://www.github.com/iTwin/iTwinUI-react/commit/111636962076797cbbc0f0b8b5ae4077a7e5a8d2))
+
+### Fixes
+
+* **Breadcrumbs**, **ButtonGroup**: Fix focus getting lost while resizing on overflow ([#777](https://www.github.com/iTwin/iTwinUI-react/issues/777)) ([8ee9c7b](https://www.github.com/iTwin/iTwinUI-react/commit/8ee9c7b57829b330cea7db5f89864c90211ec4d1))
+* **Table:** Enabled scrollToRow for lazy-loading tables ([#775](https://www.github.com/iTwin/iTwinUI-react/issues/775)) ([c57b458](https://www.github.com/iTwin/iTwinUI-react/commit/c57b458e7d74609d44d3f0d304e49ee2c1f22d54))
+* **Table:** Syncing header and body horizontal scroll state ([#760](https://www.github.com/iTwin/iTwinUI-react/issues/760)) ([5ceeec2](https://www.github.com/iTwin/iTwinUI-react/commit/5ceeec279585ca5af92f1b26440c354ee6eeb027))
+
+## [1.42.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.41.0...v1.42.0) (2022-07-26)
+
+### Fixes
+
+* **ComboBox:** Prevent infinite loop when `options` change ([#738](https://www.github.com/iTwin/iTwinUI-react/issues/738)) ([7788f45](https://www.github.com/iTwin/iTwinUI-react/commit/7788f451fcbf9dd7959d3fa727c0cdee3485bbcd))
+* **Small:** Use `small` element instead of `p` ([#735](https://www.github.com/iTwin/iTwinUI-react/issues/735)) ([c59f213](https://www.github.com/iTwin/iTwinUI-react/commit/c59f21326e049bce50e24c729a46482b74ef63c3))
+
+
+### What's new
+
+* **Table:** Scroll table to selected item ([#689](https://www.github.com/iTwin/iTwinUI-react/issues/689)) ([afa947b](https://www.github.com/iTwin/iTwinUI-react/commit/afa947b15411305c1bfc57b239d916fc599acfbe))
+* **Tree:** Virtualization ([#713](https://www.github.com/iTwin/iTwinUI-react/issues/713)) ([d4d3575](https://www.github.com/iTwin/iTwinUI-react/commit/d4d35758fa0c8f00811f387cc8453b82e9773c85))
+
+## [1.41.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.40.1...v1.41.0) (2022-07-13)
+
+### What's new
+
+* **ErrorPage:** Add time-out and redirect status codes ([#715](https://www.github.com/iTwin/iTwinUI-react/issues/715)) ([a5fb85f](https://www.github.com/iTwin/iTwinUI-react/commit/a5fb85f1f0ef9517a065db02384875d7c5d87f95))
+* **Modal:** Update classes through the css package update ([#724](https://www.github.com/iTwin/iTwinUI-react/issues/724)) ([d13e0bf](https://www.github.com/iTwin/iTwinUI-react/commit/d13e0bf7941581a3b8d275b744bf77ebd7ae95d4))
+  - Now `style` and `className` props are applied on the dialog element itself.
+* Border radius was changed from `3px` to `4px` through the css package update in all elements ([#724](https://www.github.com/iTwin/iTwinUI-react/issues/724)) ([d13e0bf](https://www.github.com/iTwin/iTwinUI-react/commit/d13e0bf7941581a3b8d275b744bf77ebd7ae95d4))
+
+### Fixes
+
+* **Combobox:** Allow users to reset the value ([#728](https://www.github.com/iTwin/iTwinUI-react/issues/728)) ([f6c0b0d](https://www.github.com/iTwin/iTwinUI-react/commit/f6c0b0d66ac9ac725a23e07980c9dd7298084ae4))
+* **Table:** Prevent crashing when clearing editable cell ([#732](https://www.github.com/iTwin/iTwinUI-react/issues/732)) ([0dedd3b](https://www.github.com/iTwin/iTwinUI-react/commit/0dedd3b8804ce98ce836d4bbbf58db83a4f9bfde))
+* **Table:** Set correct intersection root for margin to work ([#708](https://www.github.com/iTwin/iTwinUI-react/issues/708)) ([55e4848](https://www.github.com/iTwin/iTwinUI-react/commit/55e48481f95c3351c127d495bd3c20134fd4a77f))
+
 ### [1.40.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.40.0...v1.40.1) (2022-06-17)
 
 ### Fixes

package/cjs/core/Backdrop/Backdrop.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/backdrop.css';
+export declare type BackdropProps = {
+    /**
+     * Flag whether backdrop should be shown.
+     * @default true
+     */
+    isVisible?: boolean;
+} & React.ComponentPropsWithRef<'div'>;
+export declare const Backdrop: React.ForwardRefExoticComponent<Pick<BackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible"> & React.RefAttributes<HTMLDivElement>>;

package/cjs/core/Backdrop/Backdrop.js

@@ -0,0 +1,41 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Backdrop = 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 react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/backdrop.css");
+exports.Backdrop = react_1.default.forwardRef(function (props, ref) {
+    var _a = props.isVisible, isVisible = _a === void 0 ? true : _a, className = props.className, rest = __rest(props, ["isVisible", "className"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref }, rest)));
+});

package/cjs/core/Backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { Backdrop } from './Backdrop';
+export type { BackdropProps } from './Backdrop';

package/cjs/core/Backdrop/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Backdrop = 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 Backdrop_1 = require("./Backdrop");
+Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -62,28 +62,15 @@ exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
     (0, utils_1.useTheme)();
     var _b = (0, utils_1.useOverflow)(items), overflowRef = _b[0], visibleCount = _b[1];
     var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
-    var Separator = function () { return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(ChevronRight_1.default, null))); };
-    var ListItem = function (_a) {
-        var _b;
-        var index = _a.index;
-        var item = items[index];
-        return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, react_1.default.isValidElement(item)
-            ? react_1.default.cloneElement(item, {
-                'aria-current': ((_b = item.props['aria-current']) !== null && _b !== void 0 ? _b : currentIndex === index)
-                    ? 'location'
-                    : undefined,
-            })
-            : item));
-    };
     return (react_1.default.createElement("nav", __assign({ className: (0, classnames_1.default)('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb' }, rest),
         react_1.default.createElement("ol", { className: 'iui-breadcrumbs-list' },
             visibleCount > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(ListItem, { index: 0 }),
-                react_1.default.createElement(Separator, null))),
+                react_1.default.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
+                react_1.default.createElement(Separator, { separator: separator }))),
             items.length - visibleCount > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' },
                     react_1.default.createElement("span", { className: 'iui-breadcrumbs-text' }, "\u2026")),
-                react_1.default.createElement(Separator, null))),
+                react_1.default.createElement(Separator, { separator: separator }))),
             items
                 .slice(visibleCount > 1
                 ? items.length - visibleCount + 1
@@ -93,8 +80,21 @@ exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
                     ? 1 + (items.length - visibleCount) + _index
                     : items.length - 1;
                 return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                    react_1.default.createElement(ListItem, { index: index }),
-                    index < items.length - 1 && react_1.default.createElement(Separator, null)));
+                    react_1.default.createElement(ListItem, { item: items[index], isActive: currentIndex === index }),
+                    index < items.length - 1 && (react_1.default.createElement(Separator, { separator: separator }))));
             }))));
 });
+var ListItem = function (_a) {
+    var _b;
+    var item = _a.item, isActive = _a.isActive;
+    return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, react_1.default.isValidElement(item)
+        ? react_1.default.cloneElement(item, {
+            'aria-current': ((_b = item.props['aria-current']) !== null && _b !== void 0 ? _b : isActive) ? 'location' : undefined,
+        })
+        : item));
+};
+var Separator = function (_a) {
+    var separator = _a.separator;
+    return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(ChevronRight_1.default, null)));
+};
 exports.default = exports.Breadcrumbs;

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -72,9 +72,16 @@ exports.ButtonGroup = react_1.default.forwardRef(function (props, ref) {
             'iui-button-group': orientation === 'horizontal',
             'iui-button-group-vertical': orientation === 'vertical',
             'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-        }, className), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
-        overflowButton && overflowPlacement === 'start' && (react_1.default.createElement("div", null, overflowButton(visibleCount))),
-        items.slice(0, visibleCount - 1),
-        overflowButton && overflowPlacement === 'end' && (react_1.default.createElement("div", null, overflowButton(visibleCount))))) : (items)));
+        }, className), "aria-orientation": orientation, ref: refs }, rest),
+        react_1.default.createElement(react_1.default.Fragment, null,
+            visibleCount < items.length &&
+                overflowButton &&
+                overflowPlacement === 'start' && (react_1.default.createElement("div", null, overflowButton(visibleCount))),
+            visibleCount < items.length
+                ? items.slice(0, visibleCount - 1)
+                : items,
+            visibleCount < items.length &&
+                overflowButton &&
+                overflowPlacement === 'end' && (react_1.default.createElement("div", null, overflowButton(visibleCount))))));
 });
 exports.default = exports.ButtonGroup;

package/cjs/core/ComboBox/ComboBox.js

@@ -74,11 +74,10 @@ var ComboBox = function (props) {
     var inputRef = react_1.default.useRef(null);
     var menuRef = react_1.default.useRef(null);
     var toggleButtonRef = react_1.default.useRef(null);
-    // Latest value of the onChange prop
-    var onChangeProp = react_1.default.useRef(onChange);
-    react_1.default.useEffect(function () {
-        onChangeProp.current = onChange;
-    }, [onChange]);
+    var mounted = react_1.default.useRef(false);
+    var valuePropRef = (0, utils_1.useLatestRef)(valueProp);
+    var onChangeProp = (0, utils_1.useLatestRef)(onChange);
+    var optionsRef = (0, utils_1.useLatestRef)(options);
     // Record to store all extra information (e.g. original indexes), where the key is the id of the option
     var optionsExtraInfoRef = react_1.default.useRef({});
     // Clear the extra info when the options change so that it can be reinitialized below
@@ -97,7 +96,9 @@ var ComboBox = function (props) {
     // Reducer where all the component-wide state is stored
     var _e = react_1.default.useReducer(helpers_1.comboBoxReducer, {
         isOpen: false,
-        selectedIndex: -1,
+        selectedIndex: valueProp
+            ? optionsRef.current.findIndex(function (option) { return option.value === valueProp; })
+            : -1,
         focusedIndex: -1,
     }), _f = _e[0], isOpen = _f.isOpen, selectedIndex = _f.selectedIndex, focusedIndex = _f.focusedIndex, dispatch = _e[1];
     react_1.default.useLayoutEffect(function () {
@@ -105,7 +106,7 @@ var ComboBox = function (props) {
         // When the dropdown opens
         if (isOpen) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // Focus the input
-            setFilteredOptions(options); // Reset the filtered list
+            setFilteredOptions(optionsRef.current); // Reset the filtered list
             dispatch(['focus']);
         }
         // When the dropdown closes
@@ -114,10 +115,10 @@ var ComboBox = function (props) {
             dispatch(['focus']);
             // Reset the input value
             setInputValue(selectedIndex != undefined && selectedIndex >= 0
-                ? (_b = options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label
+                ? (_b = optionsRef.current[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label
                 : '');
         }
-    }, [isOpen, options, selectedIndex]);
+    }, [isOpen, optionsRef, selectedIndex]);
     // Set min-width of menu to be same as input
     var _g = react_1.default.useState(0), minWidth = _g[0], setMinWidth = _g[1];
     react_1.default.useEffect(function () {
@@ -148,14 +149,14 @@ var ComboBox = function (props) {
         var value = event.currentTarget.value;
         setInputValue(value);
         dispatch(['open']); // reopen when typing
-        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(options, value)) !== null && _a !== void 0 ? _a : options.filter(function (option) {
+        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(optionsRef.current, value)) !== null && _a !== void 0 ? _a : optionsRef.current.filter(function (option) {
             return option.label.toLowerCase().includes(value.toLowerCase());
         }));
         if (focusedIndex != -1) {
             dispatch(['focus', -1]);
         }
         (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
-    }, [filterFunction, focusedIndex, inputProps, options]);
+    }, [filterFunction, focusedIndex, inputProps, optionsRef]);
     // When the value prop changes, update the selectedIndex
     react_1.default.useEffect(function () {
         dispatch([
@@ -166,14 +167,17 @@ var ComboBox = function (props) {
     // Call user-defined onChange when the value actually changes
     react_1.default.useEffect(function () {
         var _a, _b;
-        if (selectedIndex != undefined && selectedIndex >= 0) {
-            var value = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
-            if (value === valueProp) {
-                return;
-            }
-            (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, value);
+        // Prevent user-defined onChange to be called on mount
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        var currentValue = (_a = optionsRef.current[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+        if (currentValue === valuePropRef.current || selectedIndex === -1) {
+            return;
         }
-    }, [options, selectedIndex, valueProp]);
+        (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, currentValue);
+    }, [onChangeProp, optionsRef, selectedIndex, valuePropRef]);
     var getMenuItem = react_1.default.useCallback(function (option, filteredIndex) {
         var optionId = getOptionId(option, id);
         var __originalIndex = optionsExtraInfoRef.current[optionId].__originalIndex;

package/cjs/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/cjs/core/Dialog/Dialog.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = 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 react_1 = __importDefault(require("react"));
+require("@itwin/itwinui-css/css/dialog.css");
+var DialogTitleBar_1 = require("./DialogTitleBar");
+var DialogContent_1 = require("./DialogContent");
+var DialogBackdrop_1 = require("./DialogBackdrop");
+var DialogContext_1 = require("./DialogContext");
+var DialogButtonBar_1 = require("./DialogButtonBar");
+var DialogMain_1 = __importDefault(require("./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>
+ */
+exports.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_1.default.createElement(DialogContext_1.DialogContext.Provider, { value: {
+            isOpen: isOpen,
+            onClose: onClose,
+            closeOnEsc: closeOnEsc,
+            closeOnExternalClick: closeOnExternalClick,
+            isDismissible: isDismissible,
+            preventDocumentScroll: preventDocumentScroll,
+            trapFocus: trapFocus,
+        } }, children));
+}, {
+    Backdrop: DialogBackdrop_1.DialogBackdrop,
+    Main: DialogMain_1.default,
+    TitleBar: DialogTitleBar_1.DialogTitleBar,
+    Content: DialogContent_1.DialogContent,
+    ButtonBar: DialogButtonBar_1.DialogButtonBar,
+});
+exports.default = exports.Dialog;

package/cjs/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/cjs/core/Dialog/DialogBackdrop.js

@@ -0,0 +1,61 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogBackdrop = 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 react_1 = __importDefault(require("react"));
+var Backdrop_1 = require("../Backdrop");
+var utils_1 = require("../utils");
+var DialogContext_1 = require("./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 />
+ */
+exports.DialogBackdrop = react_1.default.forwardRef(function (props, ref) {
+    var dialogContext = (0, DialogContext_1.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_1.default.useRef(null);
+    var refs = (0, utils_1.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_1.default.createElement(Backdrop_1.Backdrop, __assign({ isVisible: isVisible, ref: refs, onMouseDown: handleMouseDown }, rest)));
+});
+exports.default = exports.DialogBackdrop;

package/cjs/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/cjs/core/Dialog/DialogButtonBar.js

@@ -0,0 +1,50 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogButtonBar = 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 react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@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>
+ */
+exports.DialogButtonBar = react_1.default.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-button-bar', className), ref: ref }, rest), children));
+});
+exports.default = exports.DialogButtonBar;

package/cjs/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/cjs/core/Dialog/DialogContent.js

@@ -0,0 +1,49 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContent = 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 react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var utils_1 = require("../utils");
+require("@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>
+ */
+exports.DialogContent = react_1.default.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-content', className), ref: ref }, rest), children));
+});
+exports.default = exports.DialogContent;