@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.
- package/es/components/ComposedModal/ComposedModal.js +1 -1
- package/es/components/ComposedModal/index.js +4 -4
- package/es/components/DataTable/DataTable.js +1 -1
- package/es/components/DataTable/Table.js +10 -2
- package/es/components/DataTable/TableContainer.js +20 -5
- package/es/components/DataTable/TableContext.js +15 -0
- package/es/components/DataTable/TableSelectRow.js +1 -1
- package/es/components/FileUploader/FileUploader.js +8 -1
- package/es/components/FileUploader/FileUploaderButton.js +3 -1
- package/es/components/FileUploader/FileUploaderDropContainer.js +3 -1
- package/es/components/FileUploader/FileUploaderItem.js +3 -1
- package/es/components/InlineLoading/InlineLoading.js +9 -5
- package/es/components/Loading/Loading.js +7 -18
- package/es/components/Modal/Modal.js +204 -273
- package/es/components/Modal/index.js +2 -8
- package/es/components/ModalWrapper/ModalWrapper.js +1 -1
- package/es/components/MultiSelect/FilterableMultiSelect.js +345 -386
- package/es/components/MultiSelect/index.js +4 -8
- package/es/components/Notification/Notification.js +322 -189
- package/es/components/ProgressBar/ProgressBar.js +6 -3
- package/es/components/RadioButton/RadioButton.js +58 -99
- package/es/components/RadioButton/index.js +2 -8
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +72 -121
- package/es/components/RadioButtonGroup/index.js +2 -8
- package/es/components/Slider/Slider.js +2 -1
- package/es/components/Switch/Switch.js +0 -1
- package/es/components/TreeView/TreeView.js +19 -11
- package/es/components/UIShell/HeaderMenu.js +1 -1
- package/es/components/UIShell/HeaderMenuButton.js +4 -0
- package/es/components/UIShell/SideNavDetails.js +8 -3
- package/es/components/UIShell/SideNavLink.js +6 -9
- package/es/index.js +8 -7
- package/es/internal/createClassWrapper.js +2 -5
- package/lib/components/ComposedModal/index.js +7 -7
- package/lib/components/DataTable/DataTable.js +5 -5
- package/lib/components/DataTable/Table.js +9 -1
- package/lib/components/DataTable/TableContainer.js +19 -4
- package/lib/components/DataTable/TableContext.js +19 -0
- package/lib/components/DataTable/TableSelectRow.js +2 -2
- package/lib/components/FileUploader/FileUploader.js +8 -1
- package/lib/components/FileUploader/FileUploaderButton.js +3 -1
- package/lib/components/FileUploader/FileUploaderDropContainer.js +3 -1
- package/lib/components/FileUploader/FileUploaderItem.js +3 -1
- package/lib/components/InlineLoading/InlineLoading.js +9 -5
- package/lib/components/Loading/Loading.js +6 -17
- package/lib/components/Modal/Modal.js +201 -270
- package/lib/components/Modal/index.js +2 -25
- package/lib/components/ModalWrapper/ModalWrapper.js +2 -2
- package/lib/components/MultiSelect/FilterableMultiSelect.js +341 -382
- package/lib/components/MultiSelect/index.js +5 -28
- package/lib/components/Notification/Notification.js +321 -188
- package/lib/components/ProgressBar/ProgressBar.js +6 -3
- package/lib/components/RadioButton/RadioButton.js +57 -99
- package/lib/components/RadioButton/index.js +2 -25
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +68 -117
- package/lib/components/RadioButtonGroup/index.js +2 -25
- package/lib/components/Slider/Slider.js +2 -1
- package/lib/components/Switch/Switch.js +0 -1
- package/lib/components/TreeView/TreeView.js +18 -10
- package/lib/components/UIShell/HeaderMenu.js +1 -0
- package/lib/components/UIShell/HeaderMenuButton.js +4 -0
- package/lib/components/UIShell/SideNavDetails.js +8 -3
- package/lib/components/UIShell/SideNavLink.js +6 -9
- package/lib/index.js +91 -91
- package/lib/internal/createClassWrapper.js +2 -5
- package/package.json +8 -8
- package/es/components/Modal/next/Modal.js +0 -274
- package/es/components/MultiSelect/next/FilterableMultiSelect.js +0 -542
- package/es/components/Notification/index.js +0 -42
- package/es/components/Notification/next/Notification.js +0 -663
- package/es/components/RadioButton/next/RadioButton.js +0 -130
- package/es/components/RadioButtonGroup/next/RadioButtonGroup.js +0 -141
- package/lib/components/Modal/next/Modal.js +0 -284
- package/lib/components/MultiSelect/next/FilterableMultiSelect.js +0 -554
- package/lib/components/Notification/index.js +0 -51
- package/lib/components/Notification/next/Notification.js +0 -677
- package/lib/components/RadioButton/next/RadioButton.js +0 -140
- 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;
|