@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.5

package/cjs/core/Dialog/DialogMain.js

@@ -1,43 +1,20 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.DialogMain = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const DialogContext_js_1 = require("./DialogContext.js");
-const react_transition_group_1 = require("react-transition-group");
-const DialogDragContext_js_1 = require("./DialogDragContext.js");
-const useDragAndDrop_js_1 = __importDefault(require("../utils/hooks/useDragAndDrop.js"));
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const DialogContext_js_1 = require('./DialogContext.js');
+const react_transition_group_1 = require('react-transition-group');
+const DialogDragContext_js_1 = require('./DialogDragContext.js');
+const useDragAndDrop_js_1 = tslib_1.__importDefault(
+  require('../utils/hooks/useDragAndDrop.js'),
+);
 /**
  * Dialog component which can wrap any content.
  * @example
@@ -59,114 +36,179 @@ const useDragAndDrop_js_1 = __importDefault(require("../utils/hooks/useDragAndDr
  * </Dialog.Main>
  */
 exports.DialogMain = React.forwardRef((props, ref) => {
-    const dialogContext = (0, DialogContext_js_1.useDialogContext)();
-    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
-    const [style, setStyle] = React.useState();
-    const dialogRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
-    const hasBeenResized = React.useRef(false);
-    const previousFocusedElement = React.useRef();
-    const originalBodyOverflow = React.useRef('');
-    React.useEffect(() => {
-        if (isOpen) {
-            originalBodyOverflow.current = document.body.style.overflow;
-        }
-    }, [isOpen]);
-    // Prevents document from scrolling when the dialog is open.
-    React.useEffect(() => {
-        const ownerDocument = dialogRef.current?.ownerDocument;
-        // If there is no `ownerDocument` or `preventDocumentScroll` is false or
-        // document body originally has `overflow: hidden` (possibly from other/parent dialog), then do nothing.
-        if (!ownerDocument ||
-            !preventDocumentScroll ||
-            originalBodyOverflow.current === 'hidden') {
-            return;
-        }
-        if (isOpen) {
-            ownerDocument.body.style.overflow = 'hidden';
-        }
-        else {
-            ownerDocument.body.style.overflow = originalBodyOverflow.current;
-        }
-        return () => {
-            ownerDocument.body.style.overflow = originalBodyOverflow.current;
-        };
-    }, [isOpen, preventDocumentScroll]);
-    const handleKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        // Prevents React from resetting its properties
-        event.persist();
-        if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
-            onClose(event);
-        }
-        onKeyDown?.(event);
+  const dialogContext = (0, DialogContext_js_1.useDialogContext)();
+  const {
+    className,
+    children,
+    styleType = 'default',
+    isOpen = dialogContext.isOpen,
+    isDismissible = dialogContext.isDismissible,
+    onClose = dialogContext.onClose,
+    closeOnEsc = dialogContext.closeOnEsc,
+    trapFocus = dialogContext.trapFocus,
+    setFocus = dialogContext.setFocus,
+    preventDocumentScroll = dialogContext.preventDocumentScroll,
+    onKeyDown,
+    isDraggable = dialogContext.isDraggable,
+    isResizable = dialogContext.isResizable,
+    style: propStyle,
+    placement = dialogContext.placement,
+    ...rest
+  } = props;
+  const [style, setStyle] = React.useState();
+  const dialogRef = React.useRef(null);
+  const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
+  const hasBeenResized = React.useRef(false);
+  const previousFocusedElement = React.useRef();
+  const originalBodyOverflow = React.useRef('');
+  React.useEffect(() => {
+    if (isOpen) {
+      originalBodyOverflow.current = document.body.style.overflow;
+    }
+  }, [isOpen]);
+  // Prevents document from scrolling when the dialog is open.
+  React.useEffect(() => {
+    const ownerDocument = dialogRef.current?.ownerDocument;
+    // If there is no `ownerDocument` or `preventDocumentScroll` is false or
+    // document body originally has `overflow: hidden` (possibly from other/parent dialog), then do nothing.
+    if (
+      !ownerDocument ||
+      !preventDocumentScroll ||
+      originalBodyOverflow.current === 'hidden'
+    ) {
+      return;
+    }
+    if (isOpen) {
+      ownerDocument.body.style.overflow = 'hidden';
+    } else {
+      ownerDocument.body.style.overflow = originalBodyOverflow.current;
+    }
+    return () => {
+      ownerDocument.body.style.overflow = originalBodyOverflow.current;
     };
-    const { onPointerDown, transform } = (0, useDragAndDrop_js_1.default)(dialogRef, dialogContext.dialogRootRef, isDraggable);
-    const handlePointerDown = React.useCallback((event) => {
-        if (isDraggable) {
-            onPointerDown(event);
-        }
-    }, [isDraggable, onPointerDown]);
-    // Prevents dialog from moving when window is being resized
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        if (!isDraggable || !isOpen) {
-            return;
+  }, [isOpen, preventDocumentScroll]);
+  const handleKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    // Prevents React from resetting its properties
+    event.persist();
+    if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
+      onClose(event);
+    }
+    onKeyDown?.(event);
+  };
+  const { onPointerDown, transform } = (0, useDragAndDrop_js_1.default)(
+    dialogRef,
+    dialogContext.dialogRootRef,
+    isDraggable,
+  );
+  const handlePointerDown = React.useCallback(
+    (event) => {
+      if (isDraggable) {
+        onPointerDown(event);
+      }
+    },
+    [isDraggable, onPointerDown],
+  );
+  // Prevents dialog from moving when window is being resized
+  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+    if (!isDraggable || !isOpen) {
+      return;
+    }
+    const rect = dialogRef.current?.getBoundingClientRect();
+    const [translateX, translateY] = (0, index_js_1.getTranslateValues)(
+      dialogRef.current,
+    );
+    setStyle((oldStyle) => ({
+      ...oldStyle,
+      width: rect?.width,
+      height: rect?.height,
+      left: dialogRef.current?.offsetLeft,
+      top: dialogRef.current?.offsetTop,
+      transform: `translate(${translateX}px,${translateY}px)`,
+    }));
+  }, [isDraggable, isOpen]);
+  const setResizeStyle = React.useCallback((newStyle) => {
+    setStyle((oldStyle) => ({
+      ...oldStyle,
+      ...newStyle,
+    }));
+  }, []);
+  const content = React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-dialog',
+        {
+          'iui-dialog-default': styleType === 'default',
+          'iui-dialog-full-page': styleType === 'fullPage',
+          'iui-dialog-visible': isOpen,
+          'iui-dialog-draggable': isDraggable,
+        },
+        className,
+      ),
+      role: 'dialog',
+      ref: refs,
+      onKeyDown: handleKeyDown,
+      tabIndex: -1,
+      'data-iui-placement': placement,
+      style: {
+        transform,
+        overflow: 'unset',
+        ...style,
+        ...propStyle,
+      },
+      ...rest,
+    },
+    isResizable &&
+      React.createElement(index_js_1.Resizer, {
+        elementRef: dialogRef,
+        containerRef: dialogContext.dialogRootRef,
+        onResizeStart: () => {
+          if (!hasBeenResized.current) {
+            hasBeenResized.current = true;
+            setResizeStyle({ maxWidth: '100%' });
+          }
+        },
+        onResizeEnd: setResizeStyle,
+      }),
+    children,
+  );
+  return React.createElement(
+    react_transition_group_1.CSSTransition,
+    {
+      in: isOpen,
+      classNames: {
+        enter: 'iui-dialog-animation-enter',
+        enterActive: 'iui-dialog-animation-enter-active',
+      },
+      timeout: { exit: 600 },
+      // Focuses dialog when opened
+      onEntered: () => {
+        previousFocusedElement.current =
+          dialogRef.current?.ownerDocument.activeElement;
+        setFocus && dialogRef.current?.focus({ preventScroll: true });
+      },
+      // Brings back focus to the previously focused element when closed
+      onExit: () => {
+        if (
+          dialogRef.current?.contains(
+            dialogRef.current?.ownerDocument.activeElement,
+          )
+        ) {
+          previousFocusedElement.current?.focus();
         }
-        const rect = dialogRef.current?.getBoundingClientRect();
-        const [translateX, translateY] = (0, index_js_1.getTranslateValues)(dialogRef.current);
-        setStyle((oldStyle) => ({
-            ...oldStyle,
-            width: rect?.width,
-            height: rect?.height,
-            left: dialogRef.current?.offsetLeft,
-            top: dialogRef.current?.offsetTop,
-            transform: `translate(${translateX}px,${translateY}px)`,
-        }));
-    }, [isDraggable, isOpen]);
-    const setResizeStyle = React.useCallback((newStyle) => {
-        setStyle((oldStyle) => ({
-            ...oldStyle,
-            ...newStyle,
-        }));
-    }, []);
-    const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
-            'iui-dialog-default': styleType === 'default',
-            'iui-dialog-full-page': styleType === 'fullPage',
-            'iui-dialog-visible': isOpen,
-            'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform,
-            overflow: 'unset',
-            ...style,
-            ...propStyle,
-        }, ...rest },
-        isResizable && (React.createElement(index_js_1.Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeStart: () => {
-                if (!hasBeenResized.current) {
-                    hasBeenResized.current = true;
-                    setResizeStyle({ maxWidth: '100%' });
-                }
-            }, onResizeEnd: setResizeStyle })),
-        children));
-    return (React.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: {
-            enter: 'iui-dialog-animation-enter',
-            enterActive: 'iui-dialog-animation-enter-active',
-        }, timeout: { exit: 600 }, 
-        // Focuses dialog when opened
-        onEntered: () => {
-            previousFocusedElement.current = dialogRef.current?.ownerDocument
-                .activeElement;
-            setFocus && dialogRef.current?.focus({ preventScroll: true });
-        }, 
-        // Brings back focus to the previously focused element when closed
-        onExit: () => {
-            if (dialogRef.current?.contains(dialogRef.current?.ownerDocument.activeElement)) {
-                previousFocusedElement.current?.focus();
-            }
-        }, unmountOnExit: true, nodeRef: dialogRef },
-        React.createElement(DialogDragContext_js_1.DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },
-            trapFocus && React.createElement(index_js_1.FocusTrap, null, content),
-            !trapFocus && content)));
+      },
+      unmountOnExit: true,
+      nodeRef: dialogRef,
+    },
+    React.createElement(
+      DialogDragContext_js_1.DialogDragContext.Provider,
+      { value: { onPointerDown: handlePointerDown } },
+      trapFocus && React.createElement(index_js_1.FocusTrap, null, content),
+      !trapFocus && content,
+    ),
+  );
 });
 exports.default = exports.DialogMain;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { DialogContextProps } from './DialogContext.js';
-declare type DialogTitleBarProps = {
+type DialogTitleBarProps = {
     /**
      * Dialog title bar content. If passed, then `title` prop is ignored.
      */

package/cjs/core/Dialog/DialogTitleBar.js

@@ -1,43 +1,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.DialogTitleBar = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../Buttons/index.js");
-const DialogContext_js_1 = require("./DialogContext.js");
-const DialogTitleBarTitle_js_1 = require("./DialogTitleBarTitle.js");
-const DialogDragContext_js_1 = require("./DialogDragContext.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../Buttons/index.js');
+const DialogContext_js_1 = require('./DialogContext.js');
+const DialogTitleBarTitle_js_1 = require('./DialogTitleBarTitle.js');
+const DialogDragContext_js_1 = require('./DialogDragContext.js');
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
@@ -55,17 +30,64 @@ const DialogDragContext_js_1 = require("./DialogDragContext.js");
  *   </IconButton>
  * </Dialog.TitleBar>
  */
-exports.DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
+exports.DialogTitleBar = Object.assign(
+  React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
-    const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
-    const { onPointerDown } = (0, DialogDragContext_js_1.useDialogDragContext)();
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-title-bar', className, {
+    const {
+      children,
+      titleText,
+      isDismissible = dialogContext.isDismissible,
+      onClose = dialogContext.onClose,
+      isDraggable = dialogContext.isDraggable,
+      className,
+      onPointerDown: onPointerDownProp,
+      ...rest
+    } = props;
+    const { onPointerDown } = (0,
+    DialogDragContext_js_1.useDialogDragContext)();
+    return React.createElement(
+      index_js_1.Box,
+      {
+        className: (0, classnames_1.default)(
+          'iui-dialog-title-bar',
+          className,
+          {
             'iui-dialog-title-bar-filled': isDraggable,
-        }), ref: ref, onPointerDown: (0, index_js_1.mergeEventHandlers)(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
-        React.createElement(DialogTitleBarTitle_js_1.DialogTitleBarTitle, null, titleText),
-        isDismissible && (React.createElement(index_js_2.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-            React.createElement(index_js_1.SvgClose, null)))))));
-}), {
+          },
+        ),
+        ref: ref,
+        onPointerDown: (0, index_js_1.mergeEventHandlers)(
+          onPointerDownProp,
+          onPointerDown,
+        ),
+        ...rest,
+      },
+      children
+        ? children
+        : React.createElement(
+            React.Fragment,
+            null,
+            React.createElement(
+              DialogTitleBarTitle_js_1.DialogTitleBarTitle,
+              null,
+              titleText,
+            ),
+            isDismissible &&
+              React.createElement(
+                index_js_2.IconButton,
+                {
+                  size: 'small',
+                  styleType: 'borderless',
+                  onClick: onClose,
+                  'aria-label': 'Close',
+                },
+                React.createElement(index_js_1.SvgClose, null),
+              ),
+          ),
+    );
+  }),
+  {
     Title: DialogTitleBarTitle_js_1.DialogTitleBarTitle,
-});
+  },
+);
 exports.default = exports.DialogTitleBar;

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.DialogTitleBarTitle = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require("../utils/index.js");
+const index_js_1 = require('../utils/index.js');
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Dialog/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+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 Dialog_js_1 = require("./Dialog.js");
-Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return Dialog_js_1.Dialog; } });
+var Dialog_js_1 = require('./Dialog.js');
+Object.defineProperty(exports, 'Dialog', {
+  enumerable: true,
+  get: function () {
+    return Dialog_js_1.Dialog;
+  },
+});
 exports.default = './Dialog';

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { CommonProps, PopoverProps } from '../utils/index.js';
-export declare type DropdownMenuProps = {
+export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.
-     * You can pass function that takes argument `close` that closes the dropdown menu.
+     * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems.
      */
-    menuItems: (close: () => void) => JSX.Element[];
+    menuItems: (close: () => void) => JSX.Element[] | JSX.Element[] | JSX.Element;
     /**
      * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'.
      * @default 'menu'
@@ -35,5 +35,5 @@ export declare type DropdownMenuProps = {
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: (props: DropdownMenuProps) => React.JSX.Element;
 export default DropdownMenu;