@itwin/itwinui-react/cjs/core/Dialog/DialogMain.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'DialogMain', {
  enumerable: true,
  get: function () {
    return DialogMain;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _index = require('../../utils/index.js');
const _DialogContext = require('./DialogContext.js');
const _DialogDragContext = require('./DialogDragContext.js');
const _useDragAndDrop = require('../../utils/hooks/useDragAndDrop.js');
const _DialogMainContext = require('./DialogMainContext.js');
const DialogMain = _react.forwardRef((props, forwardedRef) => {
  let dialogContext = (0, _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 { dialogRootRef, setDialogElement } = dialogContext || {};
  let dialogRef = _react.useRef(null);
  let previousFocusedElement = _react.useRef(null);
  let [style, setStyle] = _react.useState();
  let hasBeenResized = _react.useRef(false);
  let originalBodyOverflow = _react.useRef('');
  (0, _index.useLayoutEffect)(() => {
    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;
    };
  }, [dialogRef, isOpen, preventDocumentScroll]);
  let handleKeyDown = (event) => {
    if (event.altKey) return;
    event.persist();
    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose) {
      beforeClose();
      onClose(event);
    }
    onKeyDown?.(event);
  };
  let { onPointerDown, transform } = (0, _useDragAndDrop.useDragAndDrop)(
    dialogRef,
    dialogRootRef,
    isDraggable,
  );
  let handlePointerDown = _react.useCallback(
    (event) => {
      if (isDraggable) onPointerDown(event);
    },
    [isDraggable, onPointerDown],
  );
  (0, _index.useLayoutEffect)(() => {
    if (!isDraggable || !isOpen) return;
    let [translateX, translateY] = (0, _index.getTranslateValuesFromElement)(
      dialogRef.current,
    );
    setStyle((oldStyle) => ({
      ...oldStyle,
      insetInlineStart: dialogRef.current?.offsetLeft,
      insetBlockStart: dialogRef.current?.offsetTop,
      transform: `translate(${translateX}px,${translateY}px)`,
    }));
  }, [dialogRef, isDraggable, isOpen]);
  let setResizeStyle = _react.useCallback((newStyle) => {
    setStyle((oldStyle) => ({
      ...oldStyle,
      ...newStyle,
    }));
  }, []);
  let onEnter = _react.useCallback(() => {
    previousFocusedElement.current =
      dialogRef.current?.ownerDocument.activeElement;
    if (setFocus)
      dialogRef.current?.focus({
        preventScroll: true,
      });
  }, [setFocus]);
  let beforeClose = _react.useCallback(() => {
    if (
      dialogRef.current?.contains(
        dialogRef.current?.ownerDocument.activeElement,
      )
    )
      previousFocusedElement.current?.focus();
  }, [dialogRef, previousFocusedElement]);
  let mountRef = _react.useCallback(
    (element) => {
      if (element) onEnter();
    },
    [onEnter],
  );
  let content = _react.createElement(
    _index.Box,
    {
      className: (0, _classnames.default)(
        '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: (0, _index.useMergedRefs)(
        dialogRef,
        mountRef,
        setDialogElement,
        forwardedRef,
      ),
      onKeyDown: handleKeyDown,
      tabIndex: -1,
      'data-iui-placement': placement,
      style: {
        transform,
        ...style,
        ...propStyle,
      },
      ...rest,
    },
    _react.createElement(
      _index.ShadowRoot,
      null,
      _react.createElement('slot', null),
      isResizable &&
        _react.createElement(_index.Resizer, {
          elementRef: dialogRef,
          containerRef: dialogRootRef,
          onResizeStart: () => {
            if (!hasBeenResized.current) {
              hasBeenResized.current = true;
              setResizeStyle({
                maxInlineSize: '100%',
              });
            }
          },
          onResizeEnd: setResizeStyle,
        }),
    ),
    children,
  );
  return _react.createElement(
    _DialogMainContext.DialogMainContext.Provider,
    {
      value: _react.useMemo(
        () => ({
          beforeClose,
        }),
        [beforeClose],
      ),
    },
    _react.createElement(
      _DialogDragContext.DialogDragContext.Provider,
      {
        value: {
          onPointerDown: handlePointerDown,
        },
      },
      trapFocus && _react.createElement(_index.FocusTrap, null, content),
      !trapFocus && content,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  DialogMain.displayName = 'Dialog.Main';