@carbon/react
Version:
React components for the Carbon Design System
120 lines (118 loc) • 4.85 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_keys = require("../../internal/keyboard/keys.js");
const require_match = require("../../internal/keyboard/match.js");
const require_noopFn = require("../../internal/noopFn.js");
const require_warning = require("../../internal/warning.js");
const require_Button = require("../Button/Button.js");
const require_index = require("../Button/index.js");
const require_index$1 = require("../Modal/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/ModalWrapper/ModalWrapper.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
let didWarnAboutDeprecation = false;
const isDev = process.env.NODE_ENV !== "production";
var ModalWrapper = class extends react.default.Component {
constructor(props) {
super(props);
this.triggerButton = react.default.createRef();
this.modal = react.default.createRef();
this.state = { isOpen: false };
this.handleOpen = () => {
this.setState({ isOpen: true });
};
this.handleClose = (evt) => {
const innerModal = this.modal.current?.querySelector("div");
if (this.modal.current && evt && !innerModal?.contains(evt.target) && this.props.preventCloseOnClickOutside) return;
else this.setState({ isOpen: false }, () => this.triggerButton.current?.focus());
};
this.handleOnRequestSubmit = (evt) => {
const { handleSubmit, shouldCloseAfterSubmit } = this.props;
if (handleSubmit && shouldCloseAfterSubmit) {
handleSubmit(evt);
this.handleClose(evt);
}
handleSubmit?.(evt);
};
if (isDev) {
require_warning.warning(didWarnAboutDeprecation, "`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`");
didWarnAboutDeprecation = true;
}
}
render() {
const { children, onKeyDown = require_noopFn.noopFn, buttonTriggerText, buttonTriggerClassName, renderTriggerButtonIcon, primaryButtonText = "Save", secondaryButtonText = "Cancel", triggerButtonIconDescription = "Provide icon description if icon is used", triggerButtonKind = "primary", disabled = false, handleSubmit, shouldCloseAfterSubmit, selectorPrimaryFocus = "[data-modal-primary-focus]", preventCloseOnClickOutside, ...other } = this.props;
const props = {
...other,
selectorPrimaryFocus,
open: this.state.isOpen,
onRequestClose: this.handleClose,
onRequestSubmit: this.handleOnRequestSubmit
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
role: "presentation",
onKeyDown: (evt) => {
if (require_match.match(evt, require_keys.Escape)) {
this.handleClose(evt);
onKeyDown(evt);
}
},
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
className: buttonTriggerClassName,
disabled,
kind: triggerButtonKind,
renderIcon: renderTriggerButtonIcon,
iconDescription: triggerButtonIconDescription,
onClick: this.handleOpen,
ref: this.triggerButton,
children: buttonTriggerText
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
ref: this.modal,
primaryButtonText,
secondaryButtonText,
...props,
children
})]
});
}
};
ModalWrapper.propTypes = {
buttonTriggerClassName: prop_types.default.string,
buttonTriggerText: prop_types.default.node,
children: prop_types.default.node,
disabled: prop_types.default.bool,
handleOpen: prop_types.default.func,
handleSubmit: prop_types.default.func,
id: prop_types.default.string,
modalBeforeContent: prop_types.default.bool,
modalHeading: prop_types.default.string,
modalLabel: prop_types.default.string,
modalText: prop_types.default.string,
onKeyDown: prop_types.default.func,
passiveModal: prop_types.default.bool,
preventCloseOnClickOutside: prop_types.default.bool,
primaryButtonText: prop_types.default.string,
renderTriggerButtonIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
secondaryButtonText: prop_types.default.string,
selectorPrimaryFocus: prop_types.default.string,
shouldCloseAfterSubmit: prop_types.default.bool,
status: prop_types.default.string,
triggerButtonIconDescription: prop_types.default.string,
triggerButtonKind: prop_types.default.oneOf(require_Button.ButtonKinds),
withHeader: prop_types.default.bool
};
//#endregion
exports.default = ModalWrapper;