@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Dialog/Dialog.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { DialogTitleBar } from './DialogTitleBar.js';
@@ -13,53 +9,72 @@ import { DialogMain } from './DialogMain.js';
 import { useMergedRefs, Box, Portal } from '../../utils/index.js';
 import { Transition } from 'react-transition-group';
 const DialogComponent = React.forwardRef((props, ref) => {
-    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, portal = false, ...rest } = props;
-    const dialogRootRef = React.useRef(null);
-    return (React.createElement(Transition, { in: isOpen, timeout: { exit: 600 }, mountOnEnter: true, unmountOnExit: true },
-        React.createElement(DialogContext.Provider, { value: {
-                isOpen,
-                onClose,
-                closeOnEsc,
-                closeOnExternalClick,
-                isDismissible,
-                preventDocumentScroll,
-                trapFocus,
-                setFocus,
-                isDraggable,
-                isResizable,
-                relativeTo,
-                dialogRootRef,
-                placement,
-            } },
-            React.createElement(Portal, { portal: portal },
-                React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: useMergedRefs(ref, dialogRootRef), ...rest })))));
+  const {
+    trapFocus = false,
+    setFocus = false,
+    preventDocumentScroll = false,
+    isOpen = false,
+    isDismissible = true,
+    closeOnEsc = true,
+    closeOnExternalClick = false,
+    onClose,
+    isDraggable = false,
+    isResizable = false,
+    relativeTo = 'viewport',
+    placement,
+    className,
+    portal = false,
+    ...rest
+  } = props;
+  const dialogRootRef = React.useRef(null);
+  return React.createElement(
+    Transition,
+    {
+      in: isOpen,
+      timeout: {
+        exit: 600,
+      },
+      mountOnEnter: true,
+      unmountOnExit: true,
+    },
+    React.createElement(
+      DialogContext.Provider,
+      {
+        value: {
+          isOpen,
+          onClose,
+          closeOnEsc,
+          closeOnExternalClick,
+          isDismissible,
+          preventDocumentScroll,
+          trapFocus,
+          setFocus,
+          isDraggable,
+          isResizable,
+          relativeTo,
+          dialogRootRef,
+          placement,
+        },
+      },
+      React.createElement(
+        Portal,
+        {
+          portal: portal,
+        },
+        React.createElement(Box, {
+          className: cx('iui-dialog-wrapper', className),
+          'data-iui-relative': relativeTo === 'container',
+          ref: useMergedRefs(ref, dialogRootRef),
+          ...rest,
+        }),
+      ),
+    ),
+  );
 });
-/**
- * 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 const Dialog = Object.assign(DialogComponent, {
-    Backdrop: DialogBackdrop,
-    Main: DialogMain,
-    TitleBar: DialogTitleBar,
-    Content: DialogContent,
-    ButtonBar: DialogButtonBar,
+  Backdrop: DialogBackdrop,
+  Main: DialogMain,
+  TitleBar: DialogTitleBar,
+  Content: DialogContent,
+  ButtonBar: DialogButtonBar,
 });

package/esm/core/Dialog/DialogBackdrop.js

@@ -1,36 +1,47 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Backdrop } from '../Backdrop/Backdrop.js';
 import { useMergedRefs } from '../../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import cx from 'classnames';
-/**
- * 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 const DialogBackdrop = React.forwardRef((props, ref) => {
-    const dialogContext = useDialogContext();
-    const { isVisible = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnExternalClick = dialogContext.closeOnExternalClick, relativeTo = dialogContext.relativeTo, onMouseDown, className, style, ...rest } = props;
-    const backdropRef = React.useRef(null);
-    const refs = useMergedRefs(backdropRef, ref);
-    const handleMouseDown = (event) => {
-        // Prevents React from resetting its properties
-        event.persist();
-        if (event.target !== backdropRef.current) {
-            return;
-        }
-        if (isDismissible && closeOnExternalClick && onClose) {
-            onClose(event);
-        }
-        onMouseDown?.(event);
-    };
-    return (React.createElement(Backdrop, { isVisible: isVisible, className: cx({ 'iui-backdrop-fixed': relativeTo === 'viewport' }, className), ref: refs, onMouseDown: handleMouseDown, style: {
-            pointerEvents: 'auto',
-            ...style,
-        }, ...rest }));
+  const dialogContext = useDialogContext();
+  const {
+    isVisible = dialogContext.isOpen,
+    isDismissible = dialogContext.isDismissible,
+    onClose = dialogContext.onClose,
+    closeOnExternalClick = dialogContext.closeOnExternalClick,
+    relativeTo = dialogContext.relativeTo,
+    onMouseDown,
+    className,
+    style,
+    ...rest
+  } = props;
+  const backdropRef = React.useRef(null);
+  const refs = useMergedRefs(backdropRef, ref);
+  const handleMouseDown = (event) => {
+    event.persist();
+    if (event.target !== backdropRef.current) {
+      return;
+    }
+    if (isDismissible && closeOnExternalClick && onClose) {
+      onClose(event);
+    }
+    onMouseDown?.(event);
+  };
+  return React.createElement(Backdrop, {
+    isVisible: isVisible,
+    className: cx(
+      {
+        'iui-backdrop-fixed': relativeTo === 'viewport',
+      },
+      className,
+    ),
+    ref: refs,
+    onMouseDown: handleMouseDown,
+    style: {
+      pointerEvents: 'auto',
+      ...style,
+    },
+    ...rest,
+  });
 });

package/esm/core/Dialog/DialogButtonBar.js

@@ -1,14 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * 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 const DialogButtonBar = polymorphic.div('iui-dialog-button-bar');

package/esm/core/Dialog/DialogContent.js

@@ -1,13 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
- * @example
- * <Dialog.Content>
- *   My dialog content
- * </Dialog.Content>
- */
 export const DialogContent = polymorphic.div('iui-dialog-content');

package/esm/core/Dialog/DialogContext.js

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

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

@@ -4,5 +4,5 @@ export type DialogDragContextProps = {
 };
 export declare const DialogDragContext: React.Context<DialogDragContextProps | undefined>;
 export declare const useDialogDragContext: () => {
-    onPointerDown?: ((e: React.PointerEvent<HTMLElement>) => void) | undefined;
+    onPointerDown?: (e: React.PointerEvent<HTMLElement>) => void;
 };

package/esm/core/Dialog/DialogDragContext.js

@@ -1,12 +1,8 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 export const DialogDragContext = React.createContext(undefined);
 export const useDialogDragContext = () => {
-    const context = React.useContext(DialogDragContext);
-    return {
-        ...context,
-    };
+  const context = React.useContext(DialogDragContext);
+  return {
+    ...context,
+  };
 };

package/esm/core/Dialog/DialogMain.js

@@ -1,136 +1,192 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useLayoutEffect, Box, ShadowRoot, } from '../../utils/index.js';
+import {
+  FocusTrap,
+  getTranslateValuesFromElement,
+  Resizer,
+  useMergedRefs,
+  useLayoutEffect,
+  Box,
+  ShadowRoot,
+} from '../../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import { Transition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
 import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
-/**
- * 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 const DialogMain = React.forwardRef((props, ref) => {
-    const dialogContext = 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 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 = 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 hasBeenResized = React.useRef(false);
+  const previousFocusedElement = React.useRef();
+  const originalBodyOverflow = React.useRef('');
+  React.useEffect(() => {
+    if (isOpen) {
+      originalBodyOverflow.current = document.body.style.overflow;
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    const ownerDocument = dialogRef.current?.ownerDocument;
+    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 } = useDragAndDrop(dialogRef, dialogContext.dialogRootRef, isDraggable);
-    const handlePointerDown = React.useCallback((event) => {
-        if (isDraggable) {
-            onPointerDown(event);
-        }
-    }, [isDraggable, onPointerDown]);
-    // Prevents dialog from moving when window is being resized
-    useLayoutEffect(() => {
-        if (!isDraggable || !isOpen) {
-            return;
-        }
-        const [translateX, translateY] = getTranslateValuesFromElement(dialogRef.current);
-        setStyle((oldStyle) => ({
-            ...oldStyle,
-            insetInlineStart: dialogRef.current?.offsetLeft,
-            insetBlockStart: dialogRef.current?.offsetTop,
-            transform: `translate(${translateX}px,${translateY}px)`,
-        }));
-    }, [isDraggable, isOpen]);
-    const setResizeStyle = React.useCallback((newStyle) => {
-        setStyle((oldStyle) => ({
-            ...oldStyle,
-            ...newStyle,
-        }));
-    }, []);
-    const content = (React.createElement(Box, { className: cx('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: useMergedRefs(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform,
-            ...style,
-            ...propStyle,
-        }, ...rest },
-        React.createElement(ShadowRoot, null,
-            React.createElement("slot", null),
-            isResizable && (React.createElement(Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeStart: () => {
-                    if (!hasBeenResized.current) {
-                        hasBeenResized.current = true;
-                        setResizeStyle({ maxInlineSize: '100%' });
-                    }
-                }, onResizeEnd: setResizeStyle }))),
-        children));
-    return (React.createElement(Transition, { in: isOpen, appear: true, 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();
+  }, [isOpen, preventDocumentScroll]);
+  const handleKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    event.persist();
+    if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
+      onClose(event);
+    }
+    onKeyDown?.(event);
+  };
+  const { onPointerDown, transform } = useDragAndDrop(
+    dialogRef,
+    dialogContext.dialogRootRef,
+    isDraggable,
+  );
+  const handlePointerDown = React.useCallback(
+    (event) => {
+      if (isDraggable) {
+        onPointerDown(event);
+      }
+    },
+    [isDraggable, onPointerDown],
+  );
+  useLayoutEffect(() => {
+    if (!isDraggable || !isOpen) {
+      return;
+    }
+    const [translateX, translateY] = getTranslateValuesFromElement(
+      dialogRef.current,
+    );
+    setStyle((oldStyle) => ({
+      ...oldStyle,
+      insetInlineStart: dialogRef.current?.offsetLeft,
+      insetBlockStart: dialogRef.current?.offsetTop,
+      transform: `translate(${translateX}px,${translateY}px)`,
+    }));
+  }, [isDraggable, isOpen]);
+  const setResizeStyle = React.useCallback((newStyle) => {
+    setStyle((oldStyle) => ({
+      ...oldStyle,
+      ...newStyle,
+    }));
+  }, []);
+  const content = React.createElement(
+    Box,
+    {
+      className: cx(
+        '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: useMergedRefs(dialogRef, ref),
+      onKeyDown: handleKeyDown,
+      tabIndex: -1,
+      'data-iui-placement': placement,
+      style: {
+        transform,
+        ...style,
+        ...propStyle,
+      },
+      ...rest,
+    },
+    React.createElement(
+      ShadowRoot,
+      null,
+      React.createElement('slot', null),
+      isResizable &&
+        React.createElement(Resizer, {
+          elementRef: dialogRef,
+          containerRef: dialogContext.dialogRootRef,
+          onResizeStart: () => {
+            if (!hasBeenResized.current) {
+              hasBeenResized.current = true;
+              setResizeStyle({
+                maxInlineSize: '100%',
+              });
             }
-        }, unmountOnExit: true, nodeRef: dialogRef },
-        React.createElement(DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },
-            trapFocus && React.createElement(FocusTrap, null, content),
-            !trapFocus && content)));
+          },
+          onResizeEnd: setResizeStyle,
+        }),
+    ),
+    children,
+  );
+  return React.createElement(
+    Transition,
+    {
+      in: isOpen,
+      appear: true,
+      timeout: {
+        exit: 600,
+      },
+      onEntered: () => {
+        previousFocusedElement.current =
+          dialogRef.current?.ownerDocument.activeElement;
+        setFocus &&
+          dialogRef.current?.focus({
+            preventScroll: true,
+          });
+      },
+      onExit: () => {
+        if (
+          dialogRef.current?.contains(
+            dialogRef.current?.ownerDocument.activeElement,
+          )
+        ) {
+          previousFocusedElement.current?.focus();
+        }
+      },
+      unmountOnExit: true,
+      nodeRef: dialogRef,
+    },
+    React.createElement(
+      DialogDragContext.Provider,
+      {
+        value: {
+          onPointerDown: handlePointerDown,
+        },
+      },
+      trapFocus && React.createElement(FocusTrap, null, content),
+      !trapFocus && content,
+    ),
+  );
 });