@itwin/itwinui-react 3.13.4 → 3.14.0

package/DEV-esm/core/Dialog/Dialog.js

@@ -8,46 +8,74 @@ import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
 import { useMergedRefs, Box, Portal } from '../../utils/index.js';
 import { Transition } from 'react-transition-group';
-let DialogComponent = React.forwardRef((props, ref)=>{
-    let { 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;
-    let dialogRootRef = React.useRef(null);
-    return React.createElement(Transition, {
-        in: isOpen,
-        timeout: {
-            exit: 600
-        },
-        mountOnEnter: true,
-        unmountOnExit: true
-    }, React.createElement(DialogContext.Provider, {
+let DialogComponent = React.forwardRef((props, ref) => {
+  let {
+    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;
+  let 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": 'container' === relativeTo,
-        ref: useMergedRefs(ref, dialogRootRef),
-        ...rest
-    }))));
+          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': 'container' === relativeTo,
+          ref: useMergedRefs(ref, dialogRootRef),
+          ...rest,
+        }),
+      ),
+    ),
+  );
 });
 DialogComponent.displayName = '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/DEV-esm/core/Dialog/DialogBackdrop.js

@@ -3,29 +3,42 @@ import { Backdrop } from '../Backdrop/Backdrop.js';
 import { useMergedRefs } from '../../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import cx from 'classnames';
-export const DialogBackdrop = React.forwardRef((props, ref)=>{
-    let dialogContext = useDialogContext();
-    let { isVisible = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnExternalClick = dialogContext.closeOnExternalClick, relativeTo = dialogContext.relativeTo, onMouseDown, className, style, ...rest } = props;
-    let backdropRef = React.useRef(null);
-    let refs = useMergedRefs(backdropRef, ref);
-    let 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': 'viewport' === relativeTo
-        }, className),
-        ref: refs,
-        onMouseDown: handleMouseDown,
-        style: {
-            pointerEvents: 'auto',
-            ...style
-        },
-        ...rest
-    });
+export const DialogBackdrop = React.forwardRef((props, ref) => {
+  let dialogContext = useDialogContext();
+  let {
+    isVisible = dialogContext.isOpen,
+    isDismissible = dialogContext.isDismissible,
+    onClose = dialogContext.onClose,
+    closeOnExternalClick = dialogContext.closeOnExternalClick,
+    relativeTo = dialogContext.relativeTo,
+    onMouseDown,
+    className,
+    style,
+    ...rest
+  } = props;
+  let backdropRef = React.useRef(null);
+  let refs = useMergedRefs(backdropRef, ref);
+  let 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': 'viewport' === relativeTo,
+      },
+      className,
+    ),
+    ref: refs,
+    onMouseDown: handleMouseDown,
+    style: {
+      pointerEvents: 'auto',
+      ...style,
+    },
+    ...rest,
+  });
 });
 DialogBackdrop.displayName = 'Dialog.Backdrop';

package/DEV-esm/core/Dialog/DialogContext.js

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export const DialogContext = React.createContext(void 0);
-export const useDialogContext = ()=>React.useContext(DialogContext) || {};
+export const useDialogContext = () => React.useContext(DialogContext) || {};

package/DEV-esm/core/Dialog/DialogDragContext.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 export const DialogDragContext = React.createContext(void 0);
-export const useDialogDragContext = ()=>{
-    let context = React.useContext(DialogDragContext);
-    return {
-        ...context
-    };
+export const useDialogDragContext = () => {
+  let context = React.useContext(DialogDragContext);
+  return {
+    ...context,
+  };
 };

package/DEV-esm/core/Dialog/DialogMain.js

@@ -1,119 +1,179 @@
 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';
-export const DialogMain = React.forwardRef((props, ref)=>{
-    let dialogContext = useDialogContext();
-    let { 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;
-    let [style, setStyle] = React.useState();
-    let dialogRef = React.useRef(null);
-    let hasBeenResized = React.useRef(false);
-    let previousFocusedElement = React.useRef();
-    let originalBodyOverflow = React.useRef('');
-    React.useEffect(()=>{
-        if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
-    }, [
-        isOpen
-    ]);
-    React.useEffect(()=>{
-        let ownerDocument = dialogRef.current?.ownerDocument;
-        if (!ownerDocument || !preventDocumentScroll || 'hidden' === originalBodyOverflow.current) return;
-        if (isOpen) ownerDocument.body.style.overflow = 'hidden';
-        else ownerDocument.body.style.overflow = originalBodyOverflow.current;
-        return ()=>{
-            ownerDocument.body.style.overflow = originalBodyOverflow.current;
-        };
-    }, [
-        isOpen,
-        preventDocumentScroll
-    ]);
-    let handleKeyDown = (event)=>{
-        if (event.altKey) return;
-        event.persist();
-        if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose) onClose(event);
-        onKeyDown?.(event);
+export const DialogMain = React.forwardRef((props, ref) => {
+  let dialogContext = useDialogContext();
+  let {
+    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;
+  let [style, setStyle] = React.useState();
+  let dialogRef = React.useRef(null);
+  let hasBeenResized = React.useRef(false);
+  let previousFocusedElement = React.useRef();
+  let originalBodyOverflow = React.useRef('');
+  React.useEffect(() => {
+    if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
+  }, [isOpen]);
+  React.useEffect(() => {
+    let ownerDocument = dialogRef.current?.ownerDocument;
+    if (
+      !ownerDocument ||
+      !preventDocumentScroll ||
+      'hidden' === originalBodyOverflow.current
+    )
+      return;
+    if (isOpen) ownerDocument.body.style.overflow = 'hidden';
+    else ownerDocument.body.style.overflow = originalBodyOverflow.current;
+    return () => {
+      ownerDocument.body.style.overflow = originalBodyOverflow.current;
     };
-    let { onPointerDown, transform } = useDragAndDrop(dialogRef, dialogContext.dialogRootRef, isDraggable);
-    let handlePointerDown = React.useCallback((event)=>{
-        if (isDraggable) onPointerDown(event);
-    }, [
-        isDraggable,
-        onPointerDown
-    ]);
-    useLayoutEffect(()=>{
-        if (!isDraggable || !isOpen) return;
-        let [translateX, translateY] = getTranslateValuesFromElement(dialogRef.current);
-        setStyle((oldStyle)=>({
-                ...oldStyle,
-                insetInlineStart: dialogRef.current?.offsetLeft,
-                insetBlockStart: dialogRef.current?.offsetTop,
-                transform: `translate(${translateX}px,${translateY}px)`
-            }));
-    }, [
-        isDraggable,
-        isOpen
-    ]);
-    let setResizeStyle = React.useCallback((newStyle)=>{
-        setStyle((oldStyle)=>({
-                ...oldStyle,
-                ...newStyle
-            }));
-    }, []);
-    let content = React.createElement(Box, {
-        className: cx('iui-dialog', {
-            'iui-dialog-default': 'default' === styleType,
-            'iui-dialog-full-page': 'fullPage' === styleType,
-            '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
+  }, [isOpen, preventDocumentScroll]);
+  let handleKeyDown = (event) => {
+    if (event.altKey) return;
+    event.persist();
+    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose)
+      onClose(event);
+    onKeyDown?.(event);
+  };
+  let { onPointerDown, transform } = useDragAndDrop(
+    dialogRef,
+    dialogContext.dialogRootRef,
+    isDraggable,
+  );
+  let handlePointerDown = React.useCallback(
+    (event) => {
+      if (isDraggable) onPointerDown(event);
+    },
+    [isDraggable, onPointerDown],
+  );
+  useLayoutEffect(() => {
+    if (!isDraggable || !isOpen) return;
+    let [translateX, translateY] = getTranslateValuesFromElement(
+      dialogRef.current,
+    );
+    setStyle((oldStyle) => ({
+      ...oldStyle,
+      insetInlineStart: dialogRef.current?.offsetLeft,
+      insetBlockStart: dialogRef.current?.offsetTop,
+      transform: `translate(${translateX}px,${translateY}px)`,
+    }));
+  }, [isDraggable, isOpen]);
+  let setResizeStyle = React.useCallback((newStyle) => {
+    setStyle((oldStyle) => ({
+      ...oldStyle,
+      ...newStyle,
+    }));
+  }, []);
+  let content = React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-dialog',
+        {
+          'iui-dialog-default': 'default' === styleType,
+          'iui-dialog-full-page': 'fullPage' === styleType,
+          'iui-dialog-visible': isOpen,
+          'iui-dialog-draggable': isDraggable,
         },
-        ...rest
-    }, React.createElement(ShadowRoot, null, React.createElement("slot", null), isResizable && React.createElement(Resizer, {
-        elementRef: dialogRef,
-        containerRef: dialogContext.dialogRootRef,
-        onResizeStart: ()=>{
+        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%'
-                });
+              hasBeenResized.current = true;
+              setResizeStyle({
+                maxInlineSize: '100%',
+              });
             }
-        },
-        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, {
+          },
+          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));
+          onPointerDown: handlePointerDown,
+        },
+      },
+      trapFocus && React.createElement(FocusTrap, null, content),
+      !trapFocus && content,
+    ),
+  );
 });
 DialogMain.displayName = 'Dialog.Main';

package/DEV-esm/core/Dialog/DialogTitleBar.js

@@ -5,25 +5,53 @@ import { IconButton } from '../Buttons/IconButton.js';
 import { useDialogContext } from './DialogContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';
-export const DialogTitleBar = Object.assign(React.forwardRef((props, ref)=>{
+export const DialogTitleBar = Object.assign(
+  React.forwardRef((props, ref) => {
     let dialogContext = useDialogContext();
-    let { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
+    let {
+      children,
+      titleText,
+      isDismissible = dialogContext.isDismissible,
+      onClose = dialogContext.onClose,
+      isDraggable = dialogContext.isDraggable,
+      className,
+      onPointerDown: onPointerDownProp,
+      ...rest
+    } = props;
     let { onPointerDown } = useDialogDragContext();
-    return React.createElement(Box, {
+    return React.createElement(
+      Box,
+      {
         className: cx('iui-dialog-title-bar', className, {
-            'iui-dialog-title-bar-filled': isDraggable
+          'iui-dialog-title-bar-filled': isDraggable,
         }),
         ref: ref,
         onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown),
-        ...rest
-    }, children ? children : React.createElement(React.Fragment, null, React.createElement(DialogTitleBarTitle, null, titleText), isDismissible && React.createElement(IconButton, {
-        size: "small",
-        styleType: "borderless",
-        onClick: onClose,
-        "aria-label": "Close",
-        "data-iui-shift": "right"
-    }, React.createElement(SvgClose, null))));
-}), {
-    Title: DialogTitleBarTitle
-});
+        ...rest,
+      },
+      children
+        ? children
+        : React.createElement(
+            React.Fragment,
+            null,
+            React.createElement(DialogTitleBarTitle, null, titleText),
+            isDismissible &&
+              React.createElement(
+                IconButton,
+                {
+                  size: 'small',
+                  styleType: 'borderless',
+                  onClick: onClose,
+                  'aria-label': 'Close',
+                  'data-iui-shift': 'right',
+                },
+                React.createElement(SvgClose, null),
+              ),
+          ),
+    );
+  }),
+  {
+    Title: DialogTitleBarTitle,
+  },
+);
 DialogTitleBar.displayName = 'Dialog.TitleBar';

package/DEV-esm/core/Divider/Divider.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/components/Box.js';
-export const Divider = React.forwardRef((props, ref)=>{
-    let { className, orientation = 'horizontal', ...rest } = props;
-    return React.createElement(Box, {
-        as: "hr",
-        className: cx('iui-divider', className),
-        "aria-orientation": 'vertical' === orientation ? 'vertical' : void 0,
-        ref: ref,
-        ...rest
-    });
+export const Divider = React.forwardRef((props, ref) => {
+  let { className, orientation = 'horizontal', ...rest } = props;
+  return React.createElement(Box, {
+    as: 'hr',
+    className: cx('iui-divider', className),
+    'aria-orientation': 'vertical' === orientation ? 'vertical' : void 0,
+    ref: ref,
+    ...rest,
+  });
 });
 Divider.displayName = 'Divider';