@progress/kendo-react-dialogs/Dialog.mjs

React Dialogs provide modal and non-modal windows for showing additional information to the user. KendoReact Dialogs package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as t from "react";
import * as K from "react-dom";
import o from "prop-types";
import { DialogTitleBar as U } from "./DialogTitleBar.mjs";
import { DialogActionsBar as B } from "./DialogActionsBar.mjs";
import { createPropsContext as V, useZIndexContext as W, getActiveElement as X, usePropsContext as q, FOCUSABLE_ELEMENTS as J, focusFirstFocusableChild as Q, canUseDOM as Z, dispatchEvent as Y, Keys as ee, keepFocusInContainer as te, ZIndexContext as oe, classNames as ne } from "@progress/kendo-react-common";
import { DATA_DIALOGS_ID as re, ZINDEX_DIALOGS_STEP as le, DEFAULT_DIALOGS_ZINDEX as se } from "./constants.mjs";
const ce = V(), $ = t.forwardRef((j, z) => {
  const I = W(), u = I ? I + le : se, E = t.useRef(null), n = t.useRef(null), l = t.useRef(X(document)), b = q(ce, j), r = t.useMemo(
    () => ({
      ...d,
      ...b
    }),
    [b]
  ), {
    title: m,
    width: D,
    height: h,
    children: c,
    minWidth: k,
    dir: v,
    style: T,
    themeColor: p,
    contentStyle: x,
    autoFocusedElement: a,
    appendTo: S,
    className: f,
    overlayStyle: w,
    modal: A = d.modal,
    closeIcon: F = d.closeIcon,
    autoFocus: y = d.autoFocus
  } = r, N = t.useCallback(
    () => ({
      props: r,
      element: n.current
    }),
    [r]
  );
  t.useImperativeHandle(E, N), t.useImperativeHandle(z, () => E.current);
  const O = t.useMemo(() => t.Children.toArray(c).filter(
    (e) => !t.isValidElement(e) || e.type !== B
  ), [c]), P = t.useMemo(() => t.Children.toArray(c).filter(
    (e) => t.isValidElement(e) && e.type === B
  ), [c]), { _id: R, contentId: g, id: C } = t.useMemo(() => {
    const e = r.id, s = `${e != null ? e : "accessibility"}-id`, G = `dialog-title-${s}`, H = `dialog-content-${s}`;
    return { _id: s, contentId: H, id: e || G };
  }, [r.id]), _ = t.useCallback(() => {
    if (n.current)
      if (y && !a)
        n.current.focus();
      else if (!y && a && n.current) {
        const e = n.current.querySelector(a);
        e == null || e.focus();
      } else {
        const e = [...J].map(
          (s) => s + ":not(.k-dialog-titlebar *)"
        );
        Q(n.current, e);
      }
  }, [y, a]);
  t.useEffect(() => (_(), () => {
    setTimeout(() => {
      var e;
      !n.current && l.current && Z && (document.contains(l.current) ? l.current.focus() : l.current.id && ((e = document.getElementById(l.current.id)) == null || e.focus()));
    });
  }), [_]);
  const i = t.useCallback(
    (e) => {
      e.preventDefault(), Y(r.onClose, e, N(), void 0);
    },
    [r.onClose]
  ), M = t.useCallback(
    (e) => {
      e.keyCode === ee.esc && r.onClose && (e.preventDefault(), i(e)), te(e, n.current);
    },
    [r.onClose, i]
  ), L = t.useMemo(() => /* @__PURE__ */ t.createElement(oe.Provider, { value: u }, /* @__PURE__ */ t.createElement(
    "div",
    {
      ref: n,
      [re]: R,
      className: "k-dialog-wrapper" + (f ? " " + f : ""),
      onKeyDown: M,
      tabIndex: 0,
      dir: v,
      style: {
        zIndex: u,
        ...T
      }
    },
    A && /* @__PURE__ */ t.createElement("div", { className: "k-overlay", style: w }),
    /* @__PURE__ */ t.createElement(
      "div",
      {
        className: ne("k-window k-dialog", {
          [`k-window-${p}`]: p
        }),
        role: "dialog",
        "aria-labelledby": C,
        "aria-modal": !0,
        "aria-describedby": g,
        style: { width: D, height: h, minWidth: k }
      },
      m && /* @__PURE__ */ t.createElement(U, { closeIcon: F, onCloseButtonClick: i, id: C }, m),
      /* @__PURE__ */ t.createElement("div", { className: "k-window-content k-dialog-content", style: x, id: g }, O),
      P
    )
  )), [
    u,
    R,
    f,
    M,
    T,
    v,
    w,
    p,
    C,
    g,
    D,
    h,
    k,
    F,
    i,
    x,
    m,
    O,
    P,
    A
  ]);
  return Z ? S !== null ? K.createPortal(L, S || document.body) : L : null;
}), d = {
  autoFocus: !1,
  modal: !0,
  closeIcon: !0
}, ae = {
  autoFocus: o.bool,
  autoFocusedElement: o.string,
  title: o.any,
  className: o.string,
  closeIcon: o.bool,
  modal: o.bool,
  overlayStyle: o.object,
  width: o.oneOfType([o.number, o.string]),
  height: o.oneOfType([o.number, o.string]),
  minWidth: o.oneOfType([o.number, o.string]),
  onClose: o.func,
  children: o.node,
  id: o.string,
  dir: o.string,
  style: o.object,
  contentStyle: o.object,
  appendTo: o.any,
  themeColor: o.oneOf(["primary", "dark", "light"])
};
$.displayName = "KendoReactDialog";
$.propTypes = ae;
export {
  $ as Dialog,
  d as DialogDefaultProps,
  ce as DialogPropsContext
};