@progress/kendo-react-dialogs
Version:
React Dialogs provide modal and non-modal windows for showing additional information to the user. KendoReact Dialogs package
140 lines (139 loc) • 5.53 kB
JavaScript
/**
* @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 o from "react";
import * as b from "react-dom";
import s from "prop-types";
import { DialogTitleBar as w } from "./DialogTitleBar.mjs";
import { DialogActionsBar as c } from "./DialogActionsBar.mjs";
import { dispatchEvent as F, Keys as A, keepFocusInContainer as N, getActiveElement as k, ZIndexContext as p, FOCUSABLE_ELEMENTS as S, focusFirstFocusableChild as O, classNames as P, canUseDOM as Z, createPropsContext as _, withIdHOC as B, withPropsContext as L } from "@progress/kendo-react-common";
import { getMaxZIndex as K } from "./utils.mjs";
import { DEFAULT_DIALOGS_ZINDEX as M, ZINDEX_DIALOGS_STEP as d, DATA_DIALOGS_ID as z } from "./constants.mjs";
const i = class i extends o.Component {
constructor(e) {
super(e), this.context = 0, this.titleId = this.generateTitleId(), this.contentId = this.generateContentId(), this.activeElement = null, this.onCloseDialog = (t) => {
t.preventDefault(), F(this.props.onClose, t, this, void 0);
}, this.onKeyDown = (t) => {
t.keyCode === A.esc && this.props.onClose && (t.preventDefault(), this.onCloseDialog(t)), N(t, this.element);
}, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context : M : this.state.zIndex > (this.context ? this.context + d : 0) ? this.state.zIndex : this.context + d, this.getDocument = () => this.props.appendTo ? this.props.appendTo.ownerDocument : document, this.activeElement = k(document);
}
get _id() {
return this.props.id + "-accessibility-id";
}
/**
* @hidden
*/
componentDidMount() {
if (this.element) {
if (this.props.autoFocus && !this.props.autoFocusedElement)
this.element.focus();
else if (this.props.autoFocus && this.props.autoFocusedElement)
this.element.focus();
else if (!this.props.autoFocus && this.props.autoFocusedElement) {
const e = this.element.querySelector(
this.props.autoFocusedElement
);
e && e.focus();
} else {
const e = [...S].map(
(t) => t + ":not(.k-dialog-titlebar *)"
);
O(this.element, e);
}
this.setState({
zIndex: K(this.getCurrentZIndex(), this.getDocument(), this._id)
});
}
}
/**
* @hidden
*/
componentWillUnmount() {
setTimeout(() => {
var e;
!this.element && this.activeElement && document && (document.contains(this.activeElement) ? this.activeElement.focus() : this.activeElement.id && ((e = document.getElementById(this.activeElement.id)) == null || e.focus()));
});
}
/**
* @hidden
*/
render() {
const e = this.props.id !== void 0 ? this.props.id : this.titleId, { title: t, width: h, height: m, children: u, minWidth: g, dir: y, style: f, contentStyle: I, modal: E = !0 } = this.props, r = o.Children.toArray(u), D = this.getContent(r), C = this.getActionBar(r), x = t ? {
"aria-labelledby": e
} : null, v = this.props.closeIcon !== void 0 ? this.props.closeIcon : !0, l = this.getCurrentZIndex(), a = /* @__PURE__ */ o.createElement(p.Provider, { value: l }, /* @__PURE__ */ o.createElement(
"div",
{
[z]: this._id,
className: "k-dialog-wrapper" + (this.props.className ? " " + this.props.className : ""),
onKeyDown: this.onKeyDown,
tabIndex: 0,
dir: y,
style: {
zIndex: l,
...f
},
ref: (T) => this.element = T
},
E && /* @__PURE__ */ o.createElement("div", { className: "k-overlay", style: this.props.overlayStyle }),
/* @__PURE__ */ o.createElement(
"div",
{
...x,
className: P("k-window k-dialog", {
[`k-window-${this.props.themeColor}`]: this.props.themeColor
}),
role: "dialog",
"aria-labelledby": e,
"aria-modal": !0,
"aria-describedby": this.contentId,
style: { width: h, height: m, minWidth: g }
},
this.props.title && /* @__PURE__ */ o.createElement(w, { closeIcon: v, onCloseButtonClick: this.onCloseDialog, id: e }, t),
/* @__PURE__ */ o.createElement("div", { className: "k-window-content k-dialog-content", style: I, id: this.contentId }, D),
C
)
));
return Z ? this.props.appendTo !== null ? b.createPortal(a, this.props.appendTo || document.body) : a : null;
}
getActionBar(e) {
return e.filter((t) => t && t.type === c);
}
getContent(e) {
return e.filter((t) => t && t.type !== c);
}
generateTitleId() {
return "dialog-title-" + this._id;
}
generateContentId() {
return "dialog-content-" + this._id;
}
};
i.displayName = "Dialog", i.propTypes = {
title: s.any,
id: s.string,
dir: s.string,
style: s.object,
closeIcon: s.bool,
width: s.oneOfType([s.number, s.string]),
height: s.oneOfType([s.number, s.string]),
minWidth: s.oneOfType([s.number, s.string]),
autoFocus: s.bool
}, i.defaultProps = {
autoFocus: !1
}, i.contextType = p;
let n = i;
const U = _(), G = B(
L(
U,
n
)
);
G.displayName = "KendoReactDialog";
export {
G as Dialog,
U as DialogPropsContext
};