@carbon/react 1.7.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 (78) hide show
  1. package/es/components/ComposedModal/ComposedModal.js +1 -1
  2. package/es/components/ComposedModal/index.js +4 -4
  3. package/es/components/DataTable/DataTable.js +1 -1
  4. package/es/components/DataTable/Table.js +10 -2
  5. package/es/components/DataTable/TableContainer.js +20 -5
  6. package/es/components/DataTable/TableContext.js +15 -0
  7. package/es/components/DataTable/TableSelectRow.js +1 -1
  8. package/es/components/FileUploader/FileUploader.js +8 -1
  9. package/es/components/FileUploader/FileUploaderButton.js +3 -1
  10. package/es/components/FileUploader/FileUploaderDropContainer.js +3 -1
  11. package/es/components/FileUploader/FileUploaderItem.js +3 -1
  12. package/es/components/InlineLoading/InlineLoading.js +9 -5
  13. package/es/components/Loading/Loading.js +7 -18
  14. package/es/components/Modal/Modal.js +204 -273
  15. package/es/components/Modal/index.js +2 -8
  16. package/es/components/ModalWrapper/ModalWrapper.js +1 -1
  17. package/es/components/MultiSelect/FilterableMultiSelect.js +345 -386
  18. package/es/components/MultiSelect/index.js +4 -8
  19. package/es/components/Notification/Notification.js +322 -189
  20. package/es/components/ProgressBar/ProgressBar.js +6 -3
  21. package/es/components/RadioButton/RadioButton.js +58 -99
  22. package/es/components/RadioButton/index.js +2 -8
  23. package/es/components/RadioButtonGroup/RadioButtonGroup.js +72 -121
  24. package/es/components/RadioButtonGroup/index.js +2 -8
  25. package/es/components/Slider/Slider.js +2 -1
  26. package/es/components/Switch/Switch.js +0 -1
  27. package/es/components/TreeView/TreeView.js +19 -11
  28. package/es/components/UIShell/HeaderMenu.js +1 -1
  29. package/es/components/UIShell/HeaderMenuButton.js +4 -0
  30. package/es/components/UIShell/SideNavDetails.js +8 -3
  31. package/es/components/UIShell/SideNavLink.js +6 -9
  32. package/es/index.js +8 -7
  33. package/es/internal/createClassWrapper.js +2 -5
  34. package/lib/components/ComposedModal/index.js +7 -7
  35. package/lib/components/DataTable/DataTable.js +5 -5
  36. package/lib/components/DataTable/Table.js +9 -1
  37. package/lib/components/DataTable/TableContainer.js +19 -4
  38. package/lib/components/DataTable/TableContext.js +19 -0
  39. package/lib/components/DataTable/TableSelectRow.js +2 -2
  40. package/lib/components/FileUploader/FileUploader.js +8 -1
  41. package/lib/components/FileUploader/FileUploaderButton.js +3 -1
  42. package/lib/components/FileUploader/FileUploaderDropContainer.js +3 -1
  43. package/lib/components/FileUploader/FileUploaderItem.js +3 -1
  44. package/lib/components/InlineLoading/InlineLoading.js +9 -5
  45. package/lib/components/Loading/Loading.js +6 -17
  46. package/lib/components/Modal/Modal.js +201 -270
  47. package/lib/components/Modal/index.js +2 -25
  48. package/lib/components/ModalWrapper/ModalWrapper.js +2 -2
  49. package/lib/components/MultiSelect/FilterableMultiSelect.js +341 -382
  50. package/lib/components/MultiSelect/index.js +5 -28
  51. package/lib/components/Notification/Notification.js +321 -188
  52. package/lib/components/ProgressBar/ProgressBar.js +6 -3
  53. package/lib/components/RadioButton/RadioButton.js +57 -99
  54. package/lib/components/RadioButton/index.js +2 -25
  55. package/lib/components/RadioButtonGroup/RadioButtonGroup.js +68 -117
  56. package/lib/components/RadioButtonGroup/index.js +2 -25
  57. package/lib/components/Slider/Slider.js +2 -1
  58. package/lib/components/Switch/Switch.js +0 -1
  59. package/lib/components/TreeView/TreeView.js +18 -10
  60. package/lib/components/UIShell/HeaderMenu.js +1 -0
  61. package/lib/components/UIShell/HeaderMenuButton.js +4 -0
  62. package/lib/components/UIShell/SideNavDetails.js +8 -3
  63. package/lib/components/UIShell/SideNavLink.js +6 -9
  64. package/lib/index.js +91 -91
  65. package/lib/internal/createClassWrapper.js +2 -5
  66. package/package.json +8 -8
  67. package/es/components/Modal/next/Modal.js +0 -274
  68. package/es/components/MultiSelect/next/FilterableMultiSelect.js +0 -542
  69. package/es/components/Notification/index.js +0 -42
  70. package/es/components/Notification/next/Notification.js +0 -663
  71. package/es/components/RadioButton/next/RadioButton.js +0 -130
  72. package/es/components/RadioButtonGroup/next/RadioButtonGroup.js +0 -141
  73. package/lib/components/Modal/next/Modal.js +0 -284
  74. package/lib/components/MultiSelect/next/FilterableMultiSelect.js +0 -554
  75. package/lib/components/Notification/index.js +0 -51
  76. package/lib/components/Notification/next/Notification.js +0 -677
  77. package/lib/components/RadioButton/next/RadioButton.js +0 -140
  78. package/lib/components/RadioButtonGroup/next/RadioButtonGroup.js +0 -151
@@ -1,130 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2016, 2022
3
- *
4
- * This source code is licensed under the Apache-2.0 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
9
- import PropTypes from 'prop-types';
10
- import React__default from 'react';
11
- import cx from 'classnames';
12
- import { usePrefix } from '../../../internal/usePrefix.js';
13
- import { useId } from '../../../internal/useId.js';
14
- import '../../Text/index.js';
15
- import { Text } from '../../Text/Text.js';
16
-
17
- var _excluded = ["className", "disabled", "hideLabel", "id", "labelPosition", "labelText", "name", "onChange", "value"];
18
- var RadioButton = /*#__PURE__*/React__default.forwardRef(function RadioButton(_ref, ref) {
19
- var className = _ref.className,
20
- disabled = _ref.disabled,
21
- hideLabel = _ref.hideLabel,
22
- id = _ref.id,
23
- _ref$labelPosition = _ref.labelPosition,
24
- labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
25
- _ref$labelText = _ref.labelText,
26
- labelText = _ref$labelText === void 0 ? '' : _ref$labelText,
27
- name = _ref.name,
28
- _ref$onChange = _ref.onChange,
29
- onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
30
- _ref$value = _ref.value,
31
- value = _ref$value === void 0 ? '' : _ref$value,
32
- rest = _objectWithoutProperties(_ref, _excluded);
33
-
34
- var prefix = usePrefix();
35
- var uid = useId('radio-button');
36
- var uniqueId = id || uid;
37
-
38
- function handleOnChange(event) {
39
- onChange(value, name, event);
40
- }
41
-
42
- var innerLabelClasses = cx(_defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
43
- var wrapperClasses = cx(className, "".concat(prefix, "--radio-button-wrapper"), _defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
44
- return /*#__PURE__*/React__default.createElement("div", {
45
- className: wrapperClasses
46
- }, /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
47
- type: "radio",
48
- className: "".concat(prefix, "--radio-button"),
49
- onChange: handleOnChange,
50
- id: uniqueId,
51
- ref: ref,
52
- disabled: disabled,
53
- value: value,
54
- name: name
55
- })), /*#__PURE__*/React__default.createElement("label", {
56
- htmlFor: uniqueId,
57
- className: "".concat(prefix, "--radio-button__label")
58
- }, /*#__PURE__*/React__default.createElement("span", {
59
- className: "".concat(prefix, "--radio-button__appearance")
60
- }), labelText && /*#__PURE__*/React__default.createElement(Text, {
61
- className: innerLabelClasses
62
- }, labelText)));
63
- });
64
- RadioButton.propTypes = {
65
- /**
66
- * Specify whether the `<RadioButton>` is currently checked
67
- */
68
- checked: PropTypes.bool,
69
-
70
- /**
71
- * Provide an optional className to be applied to the containing node
72
- */
73
- className: PropTypes.string,
74
-
75
- /**
76
- * Specify whether the `<RadioButton>` should be checked by default
77
- */
78
- defaultChecked: PropTypes.bool,
79
-
80
- /**
81
- * Specify whether the control is disabled
82
- */
83
- disabled: PropTypes.bool,
84
-
85
- /**
86
- * Specify whether the label should be hidden, or not
87
- */
88
- hideLabel: PropTypes.bool,
89
-
90
- /**
91
- * Provide a unique id for the underlying `<input>` node
92
- */
93
- id: PropTypes.string,
94
-
95
- /**
96
- * Provide where label text should be placed
97
- * NOTE: `top`/`bottom` are deprecated
98
- */
99
- labelPosition: PropTypes.oneOf(['right', 'left']),
100
-
101
- /**
102
- * Provide label text to be read by screen readers when interacting with the
103
- * control
104
- */
105
- labelText: PropTypes.node.isRequired,
106
-
107
- /**
108
- * Provide a name for the underlying `<input>` node
109
- */
110
- name: PropTypes.string,
111
-
112
- /**
113
- * Provide an optional `onChange` hook that is called each time the value of
114
- * the underlying `<input>` changes
115
- */
116
- onChange: PropTypes.func,
117
-
118
- /**
119
- * Provide a handler that is invoked when a user clicks on the control
120
- */
121
- onClick: PropTypes.func,
122
-
123
- /**
124
- * Specify the value of the `<RadioButton>`
125
- */
126
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
127
- };
128
- var RadioButtonNext = RadioButton;
129
-
130
- export { RadioButtonNext as default };
@@ -1,141 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2016, 2022
3
- *
4
- * This source code is licensed under the Apache-2.0 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
9
- import PropTypes from 'prop-types';
10
- import React__default, { useState } from 'react';
11
- import cx from 'classnames';
12
- import { Legend } from '../../Text/index.js';
13
- import { usePrefix } from '../../../internal/usePrefix.js';
14
-
15
- var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButtonGroup(_ref, ref) {
16
- var _classNames;
17
-
18
- var children = _ref.children,
19
- className = _ref.className,
20
- defaultSelected = _ref.defaultSelected,
21
- disabled = _ref.disabled,
22
- _ref$labelPosition = _ref.labelPosition,
23
- labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
24
- legendText = _ref.legendText,
25
- name = _ref.name,
26
- _ref$onChange = _ref.onChange,
27
- onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
28
- _ref$orientation = _ref.orientation,
29
- orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
30
- valueSelected = _ref.valueSelected;
31
- var prefix = usePrefix();
32
-
33
- var _useState = useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected),
34
- _useState2 = _slicedToArray(_useState, 2),
35
- selected = _useState2[0],
36
- setSelected = _useState2[1];
37
-
38
- var _useState3 = useState(valueSelected),
39
- _useState4 = _slicedToArray(_useState3, 2),
40
- prevValueSelected = _useState4[0],
41
- setPrevValueSelected = _useState4[1];
42
- /**
43
- * prop + state alignment - getDerivedStateFromProps
44
- * only update if selected prop changes
45
- */
46
-
47
-
48
- if (valueSelected !== prevValueSelected) {
49
- setSelected(valueSelected);
50
- setPrevValueSelected(valueSelected);
51
- }
52
-
53
- function getRadioButtons() {
54
- var mappedChildren = React__default.Children.map(children, function (radioButton) {
55
- var value = radioButton.props.value;
56
- return /*#__PURE__*/React__default.cloneElement(radioButton, {
57
- name: name,
58
- key: value,
59
- value: value,
60
- onChange: handleOnChange,
61
- checked: value === selected
62
- });
63
- });
64
- return mappedChildren;
65
- }
66
-
67
- function handleOnChange(newSelection, value, evt) {
68
- if (newSelection !== selected) {
69
- setSelected(newSelection);
70
- onChange(newSelection, name, evt);
71
- }
72
- }
73
-
74
- var fieldsetClasses = cx("".concat(prefix, "--radio-button-group"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _classNames));
75
- var wrapperClasses = cx("".concat(prefix, "--form-item"), className);
76
- return /*#__PURE__*/React__default.createElement("div", {
77
- className: wrapperClasses,
78
- ref: ref
79
- }, /*#__PURE__*/React__default.createElement("fieldset", {
80
- className: fieldsetClasses,
81
- disabled: disabled
82
- }, legendText && /*#__PURE__*/React__default.createElement(Legend, {
83
- className: "".concat(prefix, "--label")
84
- }, legendText), getRadioButtons()));
85
- });
86
- RadioButtonGroup.propTypes = {
87
- /**
88
- * Provide a collection of `<RadioButton>` components to render in the group
89
- */
90
- children: PropTypes.node,
91
-
92
- /**
93
- * Provide an optional className to be applied to the container node
94
- */
95
- className: PropTypes.string,
96
-
97
- /**
98
- * Specify the `<RadioButton>` to be selected by default
99
- */
100
- defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
101
-
102
- /**
103
- * Specify whether the group is disabled
104
- */
105
- disabled: PropTypes.bool,
106
-
107
- /**
108
- * Provide where label text should be placed
109
- */
110
- labelPosition: PropTypes.oneOf(['left', 'right']),
111
-
112
- /**
113
- * Provide a legend to the RadioButtonGroup input that you are
114
- * exposing to the user
115
- */
116
- legendText: PropTypes.node,
117
-
118
- /**
119
- * Specify the name of the underlying `<input>` nodes
120
- */
121
- name: PropTypes.string.isRequired,
122
-
123
- /**
124
- * Provide an optional `onChange` hook that is called whenever the value of
125
- * the group changes
126
- */
127
- onChange: PropTypes.func,
128
-
129
- /**
130
- * Provide where radio buttons should be placed
131
- */
132
- orientation: PropTypes.oneOf(['horizontal', 'vertical']),
133
-
134
- /**
135
- * Specify the value that is currently selected in the group
136
- */
137
- valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
138
- };
139
- var RadioButtonGroupNext = RadioButtonGroup;
140
-
141
- export { RadioButtonGroupNext as default };
@@ -1,284 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2016, 2022
3
- *
4
- * This source code is licensed under the Apache-2.0 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
13
- var PropTypes = require('prop-types');
14
- var React = require('react');
15
- var cx = require('classnames');
16
- var iconsReact = require('@carbon/icons-react');
17
- var toggleClass = require('../../../tools/toggleClass.js');
18
- var Button = require('../../Button/Button.js');
19
- var ButtonSet = require('../../ButtonSet/ButtonSet.js');
20
- var requiredIfGivenPropIsTruthy = require('../../../prop-types/requiredIfGivenPropIsTruthy.js');
21
- var wrapFocus = require('../../../internal/wrapFocus.js');
22
- var setupGetInstanceId = require('../../../tools/setupGetInstanceId.js');
23
- var usePrefix = require('../../../internal/usePrefix.js');
24
-
25
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
26
-
27
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
28
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
- var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
30
-
31
- var _Modal$propTypes;
32
-
33
- 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"];
34
- var getInstanceId = setupGetInstanceId["default"]();
35
- var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_ref, ref) {
36
- var _classNames;
37
-
38
- var children = _ref.children,
39
- className = _ref.className,
40
- modalHeading = _ref.modalHeading,
41
- modalLabel = _ref.modalLabel,
42
- modalAriaLabel = _ref.modalAriaLabel,
43
- passiveModal = _ref.passiveModal,
44
- secondaryButtonText = _ref.secondaryButtonText,
45
- primaryButtonText = _ref.primaryButtonText,
46
- open = _ref.open,
47
- onRequestClose = _ref.onRequestClose,
48
- onRequestSubmit = _ref.onRequestSubmit,
49
- onSecondarySubmit = _ref.onSecondarySubmit,
50
- primaryButtonDisabled = _ref.primaryButtonDisabled,
51
- danger = _ref.danger,
52
- alert = _ref.alert,
53
- secondaryButtons = _ref.secondaryButtons,
54
- selectorPrimaryFocus = _ref.selectorPrimaryFocus,
55
- selectorsFloatingMenus = _ref.selectorsFloatingMenus,
56
- shouldSubmitOnEnter = _ref.shouldSubmitOnEnter,
57
- size = _ref.size,
58
- hasScrollingContent = _ref.hasScrollingContent,
59
- closeButtonLabel = _ref.closeButtonLabel,
60
- preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
61
- rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
62
-
63
- var prefix = usePrefix.usePrefix();
64
- var button = React.useRef();
65
- var secondaryButton = React.useRef();
66
- var innerModal = React.useRef();
67
- var startTrap = React.useRef();
68
- var endTrap = React.useRef();
69
- var modalInstanceId = "modal-".concat(getInstanceId());
70
- var modalLabelId = "".concat(prefix, "--modal-header__label--").concat(modalInstanceId);
71
- var modalHeadingId = "".concat(prefix, "--modal-header__heading--").concat(modalInstanceId);
72
- var modalBodyId = "".concat(prefix, "--modal-body--").concat(modalInstanceId);
73
- var modalCloseButtonClass = "".concat(prefix, "--modal-close");
74
-
75
- function isCloseButton(element) {
76
- return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
77
- }
78
-
79
- function handleKeyDown(evt) {
80
- if (open) {
81
- if (evt.which === 27) {
82
- onRequestClose(evt);
83
- }
84
-
85
- if (evt.which === 13 && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
86
- onRequestSubmit(evt);
87
- }
88
- }
89
- }
90
-
91
- function handleMousedown(evt) {
92
- if (innerModal.current && !innerModal.current.contains(evt.target) && !wrapFocus.elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
93
- onRequestClose(evt);
94
- }
95
- }
96
-
97
- function handleBlur(_ref2) {
98
- var oldActiveNode = _ref2.target,
99
- currentActiveNode = _ref2.relatedTarget;
100
-
101
- if (open && currentActiveNode && oldActiveNode) {
102
- var bodyNode = innerModal.current;
103
- var startTrapNode = startTrap.current;
104
- var endTrapNode = endTrap.current;
105
- wrapFocus["default"]({
106
- bodyNode: bodyNode,
107
- startTrapNode: startTrapNode,
108
- endTrapNode: endTrapNode,
109
- currentActiveNode: currentActiveNode,
110
- oldActiveNode: oldActiveNode,
111
- selectorsFloatingMenus: selectorsFloatingMenus
112
- });
113
- }
114
- }
115
-
116
- var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
117
- var modalClasses = cx__default["default"]("".concat(prefix, "--modal"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _rollupPluginBabelHelpers.defineProperty(_classNames, 'is-visible', open), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
118
- var containerClasses = cx__default["default"]("".concat(prefix, "--modal-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
119
- var contentClasses = cx__default["default"]("".concat(prefix, "--modal-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
120
- var footerClasses = cx__default["default"]("".concat(prefix, "--modal-footer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
121
- var modalButton = /*#__PURE__*/React__default["default"].createElement("button", {
122
- className: modalCloseButtonClass,
123
- type: "button",
124
- onClick: onRequestClose,
125
- title: ariaLabel,
126
- "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
127
- ref: button
128
- }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
129
- size: 20,
130
- "aria-hidden": "true",
131
- tabIndex: "-1",
132
- className: "".concat(modalCloseButtonClass, "__icon")
133
- }));
134
- var ariaLabel = modalLabel || ['aria-label'] || modalAriaLabel || modalHeading;
135
- var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
136
- var hasScrollingContentProps = hasScrollingContent ? {
137
- tabIndex: 0,
138
- role: 'region',
139
- 'aria-label': ariaLabel,
140
- 'aria-labelledby': getAriaLabelledBy
141
- } : {};
142
- var alertDialogProps = {};
143
-
144
- if (alert && passiveModal) {
145
- alertDialogProps.role = 'alert';
146
- }
147
-
148
- if (alert && !passiveModal) {
149
- alertDialogProps.role = 'alertdialog';
150
- alertDialogProps['aria-describedby'] = modalBodyId;
151
- }
152
-
153
- React.useEffect(function () {
154
- return function () {
155
- toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), false);
156
- };
157
- }, [prefix]);
158
- React.useEffect(function () {
159
- toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), open);
160
- }, [open, prefix]);
161
- React.useEffect(function () {
162
- var initialFocus = function initialFocus(focusContainerElement) {
163
- var containerElement = focusContainerElement || innerModal.current;
164
- var primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
165
-
166
- if (primaryFocusElement) {
167
- return primaryFocusElement;
168
- }
169
-
170
- return button && button.current;
171
- };
172
-
173
- var focusButton = function focusButton(focusContainerElement) {
174
- var target = initialFocus(focusContainerElement);
175
-
176
- if (target) {
177
- target.focus();
178
- }
179
- };
180
-
181
- if (open) {
182
- focusButton(innerModal.current);
183
- }
184
- }, [open, selectorPrimaryFocus]);
185
- var modalBody = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
186
- ref: innerModal,
187
- role: "dialog"
188
- }, alertDialogProps, {
189
- className: containerClasses,
190
- "aria-label": ariaLabel,
191
- "aria-modal": "true",
192
- tabIndex: "-1"
193
- }), /*#__PURE__*/React__default["default"].createElement("div", {
194
- className: "".concat(prefix, "--modal-header")
195
- }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default["default"].createElement("h2", {
196
- id: modalLabelId,
197
- className: "".concat(prefix, "--modal-header__label")
198
- }, modalLabel), /*#__PURE__*/React__default["default"].createElement("h3", {
199
- id: modalHeadingId,
200
- className: "".concat(prefix, "--modal-header__heading")
201
- }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
202
- id: modalBodyId,
203
- className: contentClasses
204
- }, hasScrollingContentProps, {
205
- "aria-labelledby": getAriaLabelledBy
206
- }), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
207
- className: "".concat(prefix, "--modal-content--overflow-indicator")
208
- }), !passiveModal && /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], {
209
- className: footerClasses
210
- }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(function (_ref3, i) {
211
- var buttonText = _ref3.buttonText,
212
- onButtonClick = _ref3.onClick;
213
- return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
214
- key: "".concat(buttonText, "-").concat(i),
215
- kind: "secondary",
216
- onClick: onButtonClick
217
- }, buttonText);
218
- }) : secondaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
219
- kind: "secondary",
220
- onClick: onSecondaryButtonClick,
221
- ref: secondaryButton
222
- }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
223
- kind: danger ? 'danger' : 'primary',
224
- disabled: primaryButtonDisabled,
225
- onClick: onRequestSubmit,
226
- ref: button
227
- }, primaryButtonText)));
228
- return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
229
- onKeyDown: handleKeyDown,
230
- onMouseDown: handleMousedown,
231
- onBlur: handleBlur,
232
- className: modalClasses,
233
- role: "presentation",
234
- ref: ref
235
- }), /*#__PURE__*/React__default["default"].createElement("span", {
236
- ref: startTrap,
237
- tabIndex: "0",
238
- role: "link",
239
- className: "".concat(prefix, "--visually-hidden")
240
- }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default["default"].createElement("span", {
241
- ref: endTrap,
242
- tabIndex: "0",
243
- role: "link",
244
- className: "".concat(prefix, "--visually-hidden")
245
- }, "Focus sentinel"));
246
- });
247
- Modal.propTypes = (_Modal$propTypes = {
248
- /**
249
- * Specify whether the Modal is displaying an alert, error or warning
250
- * Should go hand in hand with the danger prop.
251
- */
252
- alert: PropTypes__default["default"].bool
253
- }, _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalHeading", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalLabel", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "passiveModal", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
254
- if (props.secondaryButtons) {
255
- if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
256
- return new Error("".concat(propName, " needs to be an array of two button config objects"));
257
- }
258
-
259
- var shape = {
260
- buttonText: PropTypes__default["default"].node,
261
- onClick: PropTypes__default["default"].func
262
- };
263
- props[propName].forEach(function (secondaryButton) {
264
- PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
265
- });
266
- }
267
-
268
- return null;
269
- }), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "shouldSubmitOnEnter", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _Modal$propTypes);
270
- Modal.defaultProps = {
271
- onRequestClose: function onRequestClose() {},
272
- onRequestSubmit: function onRequestSubmit() {},
273
- primaryButtonDisabled: false,
274
- onKeyDown: function onKeyDown() {},
275
- passiveModal: false,
276
- modalHeading: '',
277
- modalLabel: '',
278
- preventCloseOnClickOutside: false,
279
- selectorPrimaryFocus: '[data-modal-primary-focus]',
280
- hasScrollingContent: false
281
- };
282
- var ModalNext = Modal;
283
-
284
- exports["default"] = ModalNext;