@carbon/react 1.8.0-rc.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/es/components/Modal/Modal.js +204 -273
  2. package/es/components/Modal/index.js +2 -8
  3. package/es/components/ModalWrapper/ModalWrapper.js +1 -1
  4. package/es/index.js +1 -1
  5. package/lib/components/Modal/Modal.js +201 -270
  6. package/lib/components/Modal/index.js +2 -25
  7. package/lib/components/ModalWrapper/ModalWrapper.js +2 -2
  8. package/lib/index.js +76 -76
  9. package/package.json +6 -6
  10. package/es/components/Modal/next/Modal.js +0 -274
  11. package/lib/components/Modal/next/Modal.js +0 -284
package/es/components/Modal/Modal.js CHANGED
@@ -5,311 +5,242 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
8
+ import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
- import React__default, { Component } from 'react';
10
+ import React__default, { useRef, useEffect } from 'react';
11
11
  import cx from 'classnames';
12
12
  import { Close } from '@carbon/icons-react';
13
13
  import toggleClass from '../../tools/toggleClass.js';
14
14
  import Button from '../Button/Button.js';
15
15
  import ButtonSet from '../ButtonSet/ButtonSet.js';
16
- import deprecate from '../../prop-types/deprecate.js';
17
16
  import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
18
17
  import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
19
18
  import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
20
- import { PrefixContext } from '../../internal/usePrefix.js';
19
+ import { usePrefix } from '../../internal/usePrefix.js';
21
20
 
22
- var _defineProperty2;
21
+ var _Modal$propTypes;
23
22
 
24
- var _excluded = ["modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "hasForm", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "iconDescription", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
23
+ var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
25
24
  var getInstanceId = setupGetInstanceId();
25
+ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
26
+ var _classNames;
27
+
28
+ var children = _ref.children,
29
+ className = _ref.className,
30
+ modalHeading = _ref.modalHeading,
31
+ modalLabel = _ref.modalLabel,
32
+ modalAriaLabel = _ref.modalAriaLabel,
33
+ passiveModal = _ref.passiveModal,
34
+ secondaryButtonText = _ref.secondaryButtonText,
35
+ primaryButtonText = _ref.primaryButtonText,
36
+ open = _ref.open,
37
+ onRequestClose = _ref.onRequestClose,
38
+ onRequestSubmit = _ref.onRequestSubmit,
39
+ onSecondarySubmit = _ref.onSecondarySubmit,
40
+ primaryButtonDisabled = _ref.primaryButtonDisabled,
41
+ danger = _ref.danger,
42
+ alert = _ref.alert,
43
+ secondaryButtons = _ref.secondaryButtons,
44
+ selectorPrimaryFocus = _ref.selectorPrimaryFocus,
45
+ selectorsFloatingMenus = _ref.selectorsFloatingMenus,
46
+ shouldSubmitOnEnter = _ref.shouldSubmitOnEnter,
47
+ size = _ref.size,
48
+ hasScrollingContent = _ref.hasScrollingContent,
49
+ closeButtonLabel = _ref.closeButtonLabel,
50
+ preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
51
+ rest = _objectWithoutProperties(_ref, _excluded);
52
+
53
+ var prefix = usePrefix();
54
+ var button = useRef();
55
+ var secondaryButton = useRef();
56
+ var innerModal = useRef();
57
+ var startTrap = useRef();
58
+ var endTrap = useRef();
59
+ var modalInstanceId = "modal-".concat(getInstanceId());
60
+ var modalLabelId = "".concat(prefix, "--modal-header__label--").concat(modalInstanceId);
61
+ var modalHeadingId = "".concat(prefix, "--modal-header__heading--").concat(modalInstanceId);
62
+ var modalBodyId = "".concat(prefix, "--modal-body--").concat(modalInstanceId);
63
+ var modalCloseButtonClass = "".concat(prefix, "--modal-close");
64
+
65
+ function isCloseButton(element) {
66
+ return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
67
+ }
26
68
 
27
- var Modal = /*#__PURE__*/function (_Component) {
28
- _inherits(Modal, _Component);
29
-
30
- var _super = _createSuper(Modal);
31
-
32
- function Modal() {
33
- var _this;
34
-
35
- _classCallCheck(this, Modal);
69
+ function handleKeyDown(evt) {
70
+ if (open) {
71
+ if (evt.which === 27) {
72
+ onRequestClose(evt);
73
+ }
36
74
 
37
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
38
- args[_key] = arguments[_key];
75
+ if (evt.which === 13 && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
76
+ onRequestSubmit(evt);
77
+ }
39
78
  }
79
+ }
40
80
 
41
- _this = _super.call.apply(_super, [this].concat(args));
42
-
43
- _defineProperty(_assertThisInitialized(_this), "button", /*#__PURE__*/React__default.createRef());
44
-
45
- _defineProperty(_assertThisInitialized(_this), "secondaryButton", /*#__PURE__*/React__default.createRef());
46
-
47
- _defineProperty(_assertThisInitialized(_this), "outerModal", /*#__PURE__*/React__default.createRef());
48
-
49
- _defineProperty(_assertThisInitialized(_this), "innerModal", /*#__PURE__*/React__default.createRef());
50
-
51
- _defineProperty(_assertThisInitialized(_this), "startTrap", /*#__PURE__*/React__default.createRef());
52
-
53
- _defineProperty(_assertThisInitialized(_this), "endTrap", /*#__PURE__*/React__default.createRef());
54
-
55
- _defineProperty(_assertThisInitialized(_this), "modalInstanceId", "modal-".concat(getInstanceId()));
56
-
57
- _defineProperty(_assertThisInitialized(_this), "modalLabelId", "".concat(_this.context, "--modal-header__label--").concat(_this.modalInstanceId));
58
-
59
- _defineProperty(_assertThisInitialized(_this), "modalHeadingId", "".concat(_this.context, "--modal-header__heading--").concat(_this.modalInstanceId));
60
-
61
- _defineProperty(_assertThisInitialized(_this), "modalBodyId", "".concat(_this.context, "--modal-body--").concat(_this.modalInstanceId));
62
-
63
- _defineProperty(_assertThisInitialized(_this), "modalCloseButtonClass", "".concat(_this.context, "--modal-close"));
64
-
65
- _defineProperty(_assertThisInitialized(_this), "isCloseButton", function (element) {
66
- return !_this.props.onSecondarySubmit && element === _this.secondaryButton.current || element.classList.contains(_this.modalCloseButtonClass);
67
- });
68
-
69
- _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (evt) {
70
- if (_this.props.open) {
71
- if (evt.which === 27) {
72
- _this.props.onRequestClose(evt);
73
- }
74
-
75
- if (evt.which === 13 && _this.props.shouldSubmitOnEnter && !_this.isCloseButton(evt.target)) {
76
- _this.props.onRequestSubmit(evt);
77
- }
78
- }
79
- });
81
+ function handleMousedown(evt) {
82
+ if (innerModal.current && !innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
83
+ onRequestClose(evt);
84
+ }
85
+ }
80
86
 
81
- _defineProperty(_assertThisInitialized(_this), "handleMousedown", function (evt) {
82
- if (_this.innerModal.current && !_this.innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, _this.props.selectorsFloatingMenus) && !_this.props.preventCloseOnClickOutside) {
83
- _this.props.onRequestClose(evt);
84
- }
85
- });
87
+ function handleBlur(_ref2) {
88
+ var oldActiveNode = _ref2.target,
89
+ currentActiveNode = _ref2.relatedTarget;
90
+
91
+ if (open && currentActiveNode && oldActiveNode) {
92
+ var bodyNode = innerModal.current;
93
+ var startTrapNode = startTrap.current;
94
+ var endTrapNode = endTrap.current;
95
+ wrapFocus({
96
+ bodyNode: bodyNode,
97
+ startTrapNode: startTrapNode,
98
+ endTrapNode: endTrapNode,
99
+ currentActiveNode: currentActiveNode,
100
+ oldActiveNode: oldActiveNode,
101
+ selectorsFloatingMenus: selectorsFloatingMenus
102
+ });
103
+ }
104
+ }
86
105
 
87
- _defineProperty(_assertThisInitialized(_this), "handleBlur", function (_ref) {
88
- var oldActiveNode = _ref.target,
89
- currentActiveNode = _ref.relatedTarget;
90
- var _this$props = _this.props,
91
- open = _this$props.open,
92
- selectorsFloatingMenus = _this$props.selectorsFloatingMenus;
106
+ var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
107
+ var modalClasses = cx("".concat(prefix, "--modal"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _defineProperty(_classNames, className, className), _classNames));
108
+ var containerClasses = cx("".concat(prefix, "--modal-container"), _defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
109
+ var contentClasses = cx("".concat(prefix, "--modal-content"), _defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
110
+ var footerClasses = cx("".concat(prefix, "--modal-footer"), _defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
111
+ var modalButton = /*#__PURE__*/React__default.createElement("button", {
112
+ className: modalCloseButtonClass,
113
+ type: "button",
114
+ onClick: onRequestClose,
115
+ title: ariaLabel,
116
+ "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
117
+ ref: button
118
+ }, /*#__PURE__*/React__default.createElement(Close, {
119
+ size: 20,
120
+ "aria-hidden": "true",
121
+ tabIndex: "-1",
122
+ className: "".concat(modalCloseButtonClass, "__icon")
123
+ }));
124
+ var ariaLabel = modalLabel || ['aria-label'] || modalAriaLabel || modalHeading;
125
+ var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
126
+ var hasScrollingContentProps = hasScrollingContent ? {
127
+ tabIndex: 0,
128
+ role: 'region',
129
+ 'aria-label': ariaLabel,
130
+ 'aria-labelledby': getAriaLabelledBy
131
+ } : {};
132
+ var alertDialogProps = {};
133
+
134
+ if (alert && passiveModal) {
135
+ alertDialogProps.role = 'alert';
136
+ }
93
137
 
94
- if (open && currentActiveNode && oldActiveNode) {
95
- var bodyNode = _this.innerModal.current;
96
- var startTrapNode = _this.startTrap.current;
97
- var endTrapNode = _this.endTrap.current;
98
- wrapFocus({
99
- bodyNode: bodyNode,
100
- startTrapNode: startTrapNode,
101
- endTrapNode: endTrapNode,
102
- currentActiveNode: currentActiveNode,
103
- oldActiveNode: oldActiveNode,
104
- selectorsFloatingMenus: selectorsFloatingMenus
105
- });
106
- }
107
- });
138
+ if (alert && !passiveModal) {
139
+ alertDialogProps.role = 'alertdialog';
140
+ alertDialogProps['aria-describedby'] = modalBodyId;
141
+ }
108
142
 
109
- _defineProperty(_assertThisInitialized(_this), "initialFocus", function (focusContainerElement) {
110
- var containerElement = focusContainerElement || _this.innerModal.current;
111
- var primaryFocusElement = containerElement ? containerElement.querySelector(_this.props.selectorPrimaryFocus) : null;
143
+ useEffect(function () {
144
+ return function () {
145
+ toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), false);
146
+ };
147
+ }, [prefix]);
148
+ useEffect(function () {
149
+ toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), open);
150
+ }, [open, prefix]);
151
+ useEffect(function () {
152
+ var initialFocus = function initialFocus(focusContainerElement) {
153
+ var containerElement = focusContainerElement || innerModal.current;
154
+ var primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
112
155
 
113
156
  if (primaryFocusElement) {
114
157
  return primaryFocusElement;
115
158
  }
116
159
 
117
- return _this.button && _this.button.current;
118
- });
160
+ return button && button.current;
161
+ };
119
162
 
120
- _defineProperty(_assertThisInitialized(_this), "focusButton", function (focusContainerElement) {
121
- var target = _this.initialFocus(focusContainerElement);
163
+ var focusButton = function focusButton(focusContainerElement) {
164
+ var target = initialFocus(focusContainerElement);
122
165
 
123
166
  if (target) {
124
167
  target.focus();
125
168
  }
126
- });
127
-
128
- _defineProperty(_assertThisInitialized(_this), "handleTransitionEnd", function (evt) {
129
- if (evt.target === evt.currentTarget && // Not to handle `onTransitionEnd` on child DOM nodes
130
- _this.outerModal.current && _this.outerModal.current.offsetWidth && _this.outerModal.current.offsetHeight && _this.beingOpen) {
131
- _this.focusButton(evt.currentTarget);
132
-
133
- _this.beingOpen = false;
134
- }
135
- });
136
-
137
- return _this;
138
- }
139
-
140
- _createClass(Modal, [{
141
- key: "componentDidUpdate",
142
- value: function componentDidUpdate(prevProps) {
143
- if (!prevProps.open && this.props.open) {
144
- this.beingOpen = true;
145
- } else if (prevProps.open && !this.props.open) {
146
- this.beingOpen = false;
147
- }
148
-
149
- toggleClass(document.body, "".concat(this.context, "--body--with-modal-open"), this.props.open);
150
- }
151
- }, {
152
- key: "componentWillUnmount",
153
- value: function componentWillUnmount() {
154
- toggleClass(document.body, "".concat(this.context, "--body--with-modal-open"), false);
155
- }
156
- }, {
157
- key: "componentDidMount",
158
- value: function componentDidMount() {
159
- toggleClass(document.body, "".concat(this.context, "--body--with-modal-open"), this.props.open);
160
-
161
- if (!this.props.open) {
162
- return;
163
- }
164
-
165
- this.focusButton(this.innerModal.current);
166
- }
167
- }, {
168
- key: "render",
169
- value: function render() {
170
- var _classNames, _classNames3;
171
-
172
- var _this$props2 = this.props,
173
- modalHeading = _this$props2.modalHeading,
174
- modalLabel = _this$props2.modalLabel,
175
- modalAriaLabel = _this$props2.modalAriaLabel,
176
- passiveModal = _this$props2.passiveModal,
177
- hasForm = _this$props2.hasForm,
178
- secondaryButtonText = _this$props2.secondaryButtonText,
179
- primaryButtonText = _this$props2.primaryButtonText,
180
- open = _this$props2.open,
181
- onRequestClose = _this$props2.onRequestClose,
182
- onRequestSubmit = _this$props2.onRequestSubmit,
183
- onSecondarySubmit = _this$props2.onSecondarySubmit,
184
- iconDescription = _this$props2.iconDescription,
185
- primaryButtonDisabled = _this$props2.primaryButtonDisabled,
186
- danger = _this$props2.danger,
187
- alert = _this$props2.alert,
188
- secondaryButtons = _this$props2.secondaryButtons;
189
- _this$props2.selectorPrimaryFocus;
190
- _this$props2.selectorsFloatingMenus;
191
- _this$props2.shouldSubmitOnEnter;
192
- var size = _this$props2.size,
193
- hasScrollingContent = _this$props2.hasScrollingContent,
194
- closeButtonLabel = _this$props2.closeButtonLabel;
195
- _this$props2.preventCloseOnClickOutside;
196
- var other = _objectWithoutProperties(_this$props2, _excluded);
197
-
198
- var prefix = this.context;
199
- var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
200
- var modalClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal"), true), _defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), this.props.danger), _defineProperty(_classNames, this.props.className, this.props.className), _classNames));
201
- var containerClasses = cx("".concat(prefix, "--modal-container"), _defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
202
- var contentClasses = cx("".concat(prefix, "--modal-content"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--modal-content--with-form"), hasForm), _defineProperty(_classNames3, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _classNames3));
203
- var footerClasses = cx("".concat(prefix, "--modal-footer"), _defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
204
- var modalButton = /*#__PURE__*/React__default.createElement("button", {
205
- className: this.modalCloseButtonClass,
206
- type: "button",
207
- onClick: onRequestClose,
208
- title: ariaLabel ? ariaLabel : iconDescription,
209
- "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
210
- ref: this.button
211
- }, /*#__PURE__*/React__default.createElement(Close, {
212
- size: 20,
213
- "aria-hidden": "true",
214
- tabIndex: "-1",
215
- className: "".concat(this.modalCloseButtonClass, "__icon")
216
- }));
217
- var ariaLabel = modalLabel || this.props['aria-label'] || modalAriaLabel || modalHeading;
218
- var getAriaLabelledBy = modalLabel ? this.modalLabelId : this.modalHeadingId;
219
- var hasScrollingContentProps = hasScrollingContent ? {
220
- tabIndex: 0,
221
- role: 'region',
222
- 'aria-label': ariaLabel,
223
- 'aria-labelledby': getAriaLabelledBy
224
- } : {};
225
- var alertDialogProps = {};
226
-
227
- if (alert && passiveModal) {
228
- alertDialogProps.role = 'alert';
229
- }
230
-
231
- if (alert && !passiveModal) {
232
- alertDialogProps.role = 'alertdialog';
233
- alertDialogProps['aria-describedby'] = this.modalBodyId;
234
- }
169
+ };
235
170
 
236
- var modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
237
- ref: this.innerModal,
238
- role: "dialog"
239
- }, alertDialogProps, {
240
- className: containerClasses,
241
- "aria-label": ariaLabel,
242
- "aria-modal": "true",
243
- tabIndex: "-1"
244
- }), /*#__PURE__*/React__default.createElement("div", {
245
- className: "".concat(prefix, "--modal-header")
246
- }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement("h2", {
247
- id: this.modalLabelId,
248
- className: "".concat(prefix, "--modal-header__label")
249
- }, modalLabel), /*#__PURE__*/React__default.createElement("h3", {
250
- id: this.modalHeadingId,
251
- className: "".concat(prefix, "--modal-header__heading")
252
- }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
253
- id: this.modalBodyId,
254
- className: contentClasses
255
- }, hasScrollingContentProps, {
256
- "aria-labelledby": getAriaLabelledBy
257
- }), this.props.children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
258
- className: "".concat(prefix, "--modal-content--overflow-indicator")
259
- }), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
260
- className: footerClasses
261
- }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(function (_ref2, i) {
262
- var buttonText = _ref2.buttonText,
263
- onButtonClick = _ref2.onClick;
264
- return /*#__PURE__*/React__default.createElement(Button, {
265
- key: "".concat(buttonText, "-").concat(i),
266
- kind: "secondary",
267
- onClick: onButtonClick
268
- }, buttonText);
269
- }) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
270
- kind: "secondary",
271
- onClick: onSecondaryButtonClick,
272
- ref: this.secondaryButton
273
- }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
274
- kind: danger ? 'danger' : 'primary',
275
- disabled: primaryButtonDisabled,
276
- onClick: onRequestSubmit,
277
- ref: this.button
278
- }, primaryButtonText)));
279
- return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
280
- onKeyDown: this.handleKeyDown,
281
- onMouseDown: this.handleMousedown,
282
- onBlur: this.handleBlur,
283
- className: modalClasses,
284
- role: "presentation",
285
- onTransitionEnd: this.props.open ? this.handleTransitionEnd : undefined,
286
- ref: this.outerModal
287
- }), /*#__PURE__*/React__default.createElement("span", {
288
- ref: this.startTrap,
289
- tabIndex: "0",
290
- role: "link",
291
- className: "".concat(prefix, "--visually-hidden")
292
- }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
293
- ref: this.endTrap,
294
- tabIndex: "0",
295
- role: "link",
296
- className: "".concat(prefix, "--visually-hidden")
297
- }, "Focus sentinel"));
171
+ if (open) {
172
+ focusButton(innerModal.current);
298
173
  }
299
- }]);
300
-
301
- return Modal;
302
- }(Component);
303
-
304
- _defineProperty(Modal, "contextType", PrefixContext);
305
-
306
- _defineProperty(Modal, "propTypes", (_defineProperty2 = {
174
+ }, [open, selectorPrimaryFocus]);
175
+ var modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
176
+ ref: innerModal,
177
+ role: "dialog"
178
+ }, alertDialogProps, {
179
+ className: containerClasses,
180
+ "aria-label": ariaLabel,
181
+ "aria-modal": "true",
182
+ tabIndex: "-1"
183
+ }), /*#__PURE__*/React__default.createElement("div", {
184
+ className: "".concat(prefix, "--modal-header")
185
+ }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement("h2", {
186
+ id: modalLabelId,
187
+ className: "".concat(prefix, "--modal-header__label")
188
+ }, modalLabel), /*#__PURE__*/React__default.createElement("h3", {
189
+ id: modalHeadingId,
190
+ className: "".concat(prefix, "--modal-header__heading")
191
+ }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
192
+ id: modalBodyId,
193
+ className: contentClasses
194
+ }, hasScrollingContentProps, {
195
+ "aria-labelledby": getAriaLabelledBy
196
+ }), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
197
+ className: "".concat(prefix, "--modal-content--overflow-indicator")
198
+ }), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
199
+ className: footerClasses
200
+ }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(function (_ref3, i) {
201
+ var buttonText = _ref3.buttonText,
202
+ onButtonClick = _ref3.onClick;
203
+ return /*#__PURE__*/React__default.createElement(Button, {
204
+ key: "".concat(buttonText, "-").concat(i),
205
+ kind: "secondary",
206
+ onClick: onButtonClick
207
+ }, buttonText);
208
+ }) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
209
+ kind: "secondary",
210
+ onClick: onSecondaryButtonClick,
211
+ ref: secondaryButton
212
+ }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
213
+ kind: danger ? 'danger' : 'primary',
214
+ disabled: primaryButtonDisabled,
215
+ onClick: onRequestSubmit,
216
+ ref: button
217
+ }, primaryButtonText)));
218
+ return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
219
+ onKeyDown: handleKeyDown,
220
+ onMouseDown: handleMousedown,
221
+ onBlur: handleBlur,
222
+ className: modalClasses,
223
+ role: "presentation",
224
+ ref: ref
225
+ }), /*#__PURE__*/React__default.createElement("span", {
226
+ ref: startTrap,
227
+ tabIndex: "0",
228
+ role: "link",
229
+ className: "".concat(prefix, "--visually-hidden")
230
+ }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
231
+ ref: endTrap,
232
+ tabIndex: "0",
233
+ role: "link",
234
+ className: "".concat(prefix, "--visually-hidden")
235
+ }, "Focus sentinel"));
236
+ });
237
+ Modal.propTypes = (_Modal$propTypes = {
307
238
  /**
308
239
  * Specify whether the Modal is displaying an alert, error or warning
309
240
  * Should go hand in hand with the danger prop.
310
241
  */
311
242
  alert: PropTypes.bool
312
- }, _defineProperty(_defineProperty2, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_defineProperty2, "children", PropTypes.node), _defineProperty(_defineProperty2, "className", PropTypes.string), _defineProperty(_defineProperty2, "closeButtonLabel", PropTypes.string), _defineProperty(_defineProperty2, "danger", PropTypes.bool), _defineProperty(_defineProperty2, "focusTrap", deprecate(PropTypes.bool, "\nThe prop `focusTrap` for Modal has been deprecated, as the feature of `focusTrap` runs by default.")), _defineProperty(_defineProperty2, "hasForm", deprecate(PropTypes.bool, "\nThe prop `hasForm` for Modal has been deprecated, as the feature of `hasForm` runs by default.")), _defineProperty(_defineProperty2, "hasScrollingContent", PropTypes.bool), _defineProperty(_defineProperty2, "iconDescription", deprecate(PropTypes.string, 'The iconDescription prop is no longer needed and can be safely removed. This prop will be removed in the next major release of Carbon.')), _defineProperty(_defineProperty2, "id", PropTypes.string), _defineProperty(_defineProperty2, "modalAriaLabel", PropTypes.string), _defineProperty(_defineProperty2, "modalHeading", PropTypes.node), _defineProperty(_defineProperty2, "modalLabel", PropTypes.node), _defineProperty(_defineProperty2, "onKeyDown", PropTypes.func), _defineProperty(_defineProperty2, "onRequestClose", PropTypes.func), _defineProperty(_defineProperty2, "onRequestSubmit", PropTypes.func), _defineProperty(_defineProperty2, "onSecondarySubmit", PropTypes.func), _defineProperty(_defineProperty2, "open", PropTypes.bool), _defineProperty(_defineProperty2, "passiveModal", PropTypes.bool), _defineProperty(_defineProperty2, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_defineProperty2, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_defineProperty2, "primaryButtonText", PropTypes.node), _defineProperty(_defineProperty2, "secondaryButtonText", PropTypes.node), _defineProperty(_defineProperty2, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
243
+ }, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes.bool), _defineProperty(_Modal$propTypes, "id", PropTypes.string), _defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "modalHeading", PropTypes.node), _defineProperty(_Modal$propTypes, "modalLabel", PropTypes.node), _defineProperty(_Modal$propTypes, "onKeyDown", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestClose", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "open", PropTypes.bool), _defineProperty(_Modal$propTypes, "passiveModal", PropTypes.bool), _defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
313
244
  if (props.secondaryButtons) {
314
245
  if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
315
246
  return new Error("".concat(propName, " needs to be an array of two button config objects"));
@@ -325,9 +256,8 @@ _defineProperty(Modal, "propTypes", (_defineProperty2 = {
325
256
  }
326
257
 
327
258
  return null;
328
- }), _defineProperty(_defineProperty2, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_defineProperty2, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_defineProperty2, "shouldSubmitOnEnter", PropTypes.bool), _defineProperty(_defineProperty2, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _defineProperty2));
329
-
330
- _defineProperty(Modal, "defaultProps", {
259
+ }), _defineProperty(_Modal$propTypes, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_Modal$propTypes, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_Modal$propTypes, "shouldSubmitOnEnter", PropTypes.bool), _defineProperty(_Modal$propTypes, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _Modal$propTypes);
260
+ Modal.defaultProps = {
331
261
  onRequestClose: function onRequestClose() {},
332
262
  onRequestSubmit: function onRequestSubmit() {},
333
263
  primaryButtonDisabled: false,
@@ -338,6 +268,7 @@ _defineProperty(Modal, "defaultProps", {
338
268
  preventCloseOnClickOutside: false,
339
269
  selectorPrimaryFocus: '[data-modal-primary-focus]',
340
270
  hasScrollingContent: false
341
- });
271
+ };
272
+ var Modal$1 = Modal;
342
273
 
343
- export { Modal as default };
274
+ export { Modal$1 as default };
package/es/components/Modal/index.js CHANGED
@@ -5,11 +5,5 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import * as FeatureFlags from '@carbon/feature-flags';
9
- import ModalNext from './next/Modal.js';
10
- import Modal$2 from './Modal.js';
11
-
12
- var Modal = FeatureFlags.enabled('enable-v11-release') ? ModalNext : Modal$2;
13
- var Modal$1 = Modal;
14
-
15
- export { Modal$1 as default };
8
+ import Modal from './Modal.js';
9
+ export { default } from './Modal.js';
package/es/components/ModalWrapper/ModalWrapper.js CHANGED
@@ -8,7 +8,7 @@
8
8
  import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
10
  import React__default from 'react';
11
- import Modal from '../Modal/index.js';
11
+ import Modal from '../Modal/Modal.js';
12
12
  import Button from '../Button/Button.js';
13
13
  import { ButtonKinds } from '../../prop-types/types.js';
14
14
 
package/es/index.js CHANGED
@@ -39,7 +39,7 @@ export { default as InlineLoading } from './components/InlineLoading/InlineLoadi
39
39
  export { default as Link } from './components/Link/Link.js';
40
40
  export { default as ListItem } from './components/ListItem/ListItem.js';
41
41
  export { default as Loading } from './components/Loading/Loading.js';
42
- export { default as Modal } from './components/Modal/index.js';
42
+ export { default as Modal } from './components/Modal/Modal.js';
43
43
  export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
44
44
  import './components/MultiSelect/index.js';
45
45
  export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';