@itwin/itwinui-react 1.41.0 → 1.43.1

package/esm/core/Backdrop/Backdrop.js

@@ -0,0 +1,35 @@
+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/backdrop.css';
+export var Backdrop = React.forwardRef(function (props, ref) {
+    var _a = props.isVisible, isVisible = _a === void 0 ? true : _a, className = props.className, rest = __rest(props, ["isVisible", "className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref }, rest)));
+});

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

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

package/esm/core/Backdrop/index.js

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

package/esm/core/Breadcrumbs/Breadcrumbs.js

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

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -66,9 +66,16 @@ export var ButtonGroup = React.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.createElement(React.Fragment, null,
-        overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
-        items.slice(0, visibleCount - 1),
-        overflowButton && overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))) : (items)));
+        }, className), "aria-orientation": orientation, ref: refs }, rest),
+        React.createElement(React.Fragment, null,
+            visibleCount < items.length &&
+                overflowButton &&
+                overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
+            visibleCount < items.length
+                ? items.slice(0, visibleCount - 1)
+                : items,
+            visibleCount < items.length &&
+                overflowButton &&
+                overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))));
 });
 export default ButtonGroup;

package/esm/core/ComboBox/ComboBox.js

@@ -28,7 +28,7 @@ import React from 'react';
 import cx from 'classnames';
 import { MenuExtraContent } from '../Menu';
 import { Text } from '../Typography';
-import { useTheme, getRandomValue, mergeRefs, } from '../utils';
+import { useTheme, getRandomValue, mergeRefs, useLatestRef, } from '../utils';
 import 'tippy.js/animations/shift-away.css';
 import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers';
 import { ComboBoxDropdown } from './ComboBoxDropdown';
@@ -69,11 +69,9 @@ export var ComboBox = function (props) {
     var menuRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
     var mounted = React.useRef(false);
-    // Latest value of the onChange prop
-    var onChangeProp = React.useRef(onChange);
-    React.useEffect(function () {
-        onChangeProp.current = onChange;
-    }, [onChange]);
+    var valuePropRef = useLatestRef(valueProp);
+    var onChangeProp = useLatestRef(onChange);
+    var optionsRef = useLatestRef(options);
     // Record to store all extra information (e.g. original indexes), where the key is the id of the option
     var optionsExtraInfoRef = React.useRef({});
     // Clear the extra info when the options change so that it can be reinitialized below
@@ -93,7 +91,7 @@ export var ComboBox = function (props) {
     var _e = React.useReducer(comboBoxReducer, {
         isOpen: false,
         selectedIndex: valueProp
-            ? options.findIndex(function (option) { return option.value === 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];
@@ -102,7 +100,7 @@ export 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
@@ -111,10 +109,10 @@ export 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.useState(0), minWidth = _g[0], setMinWidth = _g[1];
     React.useEffect(function () {
@@ -145,14 +143,14 @@ export 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.useEffect(function () {
         dispatch([
@@ -168,9 +166,12 @@ export var ComboBox = function (props) {
             mounted.current = true;
             return;
         }
-        var value = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
-        (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, value);
-    }, [options, selectedIndex]);
+        var currentValue = (_a = optionsRef.current[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+        if (currentValue === valuePropRef.current || selectedIndex === -1) {
+            return;
+        }
+        (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, currentValue);
+    }, [onChangeProp, optionsRef, selectedIndex, valuePropRef]);
     var getMenuItem = React.useCallback(function (option, filteredIndex) {
         var optionId = getOptionId(option, id);
         var __originalIndex = optionsExtraInfoRef.current[optionId].__originalIndex;

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;