@carbon/react 1.9.0 → 1.10.0-rc.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 +172 -577
- package/es/components/ComposedModal/{next/ModalFooter.js → ModalFooter.js} +4 -4
- package/es/components/ComposedModal/{next/ModalHeader.js → ModalHeader.js} +2 -2
- package/es/components/DataTable/tools/sorting.js +8 -0
- package/es/components/Icon/Icon.Skeleton.js +4 -12
- package/es/components/InlineCheckbox/InlineCheckbox.js +0 -1
- package/es/components/NumberInput/NumberInput.js +3 -3
- package/es/components/TileGroup/TileGroup.js +1 -1
- package/es/index.js +3 -2
- package/es/internal/useControllableState.js +1 -1
- package/lib/components/ComposedModal/ComposedModal.js +174 -581
- package/lib/components/ComposedModal/{next/ModalFooter.js → ModalFooter.js} +4 -4
- package/lib/components/ComposedModal/{next/ModalHeader.js → ModalHeader.js} +2 -2
- package/lib/components/DataTable/tools/sorting.js +8 -0
- package/lib/components/Icon/Icon.Skeleton.js +4 -12
- package/lib/components/InlineCheckbox/InlineCheckbox.js +0 -1
- package/lib/components/NumberInput/NumberInput.js +3 -3
- package/lib/components/TileGroup/TileGroup.js +1 -1
- package/lib/index.js +53 -52
- package/lib/internal/useControllableState.js +1 -1
- package/package.json +4 -4
- package/es/components/ComposedModal/index.js +0 -19
- package/es/components/ComposedModal/next/ComposedModal.js +0 -225
- package/lib/components/ComposedModal/index.js +0 -45
- package/lib/components/ComposedModal/next/ComposedModal.js +0 -236
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
|
-
var _rollupPluginBabelHelpers = require('
|
|
12
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
13
|
var React = require('react');
|
|
14
14
|
var PropTypes = require('prop-types');
|
|
15
|
-
var Button = require('
|
|
16
|
-
var ButtonSet = require('
|
|
15
|
+
var Button = require('../Button/Button.js');
|
|
16
|
+
var ButtonSet = require('../ButtonSet/ButtonSet.js');
|
|
17
17
|
var cx = require('classnames');
|
|
18
|
-
var usePrefix = require('
|
|
18
|
+
var usePrefix = require('../../internal/usePrefix.js');
|
|
19
19
|
|
|
20
20
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
21
|
|
|
@@ -9,12 +9,12 @@
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
|
-
var _rollupPluginBabelHelpers = require('
|
|
12
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
13
|
var React = require('react');
|
|
14
14
|
var PropTypes = require('prop-types');
|
|
15
15
|
var cx = require('classnames');
|
|
16
16
|
var iconsReact = require('@carbon/icons-react');
|
|
17
|
-
var usePrefix = require('
|
|
17
|
+
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
18
|
|
|
19
19
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
20
|
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
|
+
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
12
13
|
var cells = require('./cells.js');
|
|
13
14
|
var sortStates = require('../state/sortStates.js');
|
|
14
15
|
|
|
@@ -33,6 +34,13 @@ var compare = function compare(a, b) {
|
|
|
33
34
|
|
|
34
35
|
if (typeof a === 'string' && typeof b === 'string') {
|
|
35
36
|
return compareStrings(a, b, locale);
|
|
37
|
+
} // if column has React elements, this should sort by the child string if there is one
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
if (_rollupPluginBabelHelpers["typeof"](a) === 'object' && _rollupPluginBabelHelpers["typeof"](b) === 'object') {
|
|
41
|
+
if (typeof a.props.children === 'string' && typeof b.props.children === 'string') {
|
|
42
|
+
return compareStrings(a.props.children, b.props.children, locale);
|
|
43
|
+
}
|
|
36
44
|
}
|
|
37
45
|
|
|
38
46
|
return compareStrings('' + a, '' + b, locale);
|
|
@@ -21,18 +21,15 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
|
21
21
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
22
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
23
23
|
|
|
24
|
-
var _excluded = ["
|
|
24
|
+
var _excluded = ["className"];
|
|
25
25
|
|
|
26
26
|
var IconSkeleton = function IconSkeleton(_ref) {
|
|
27
|
-
var
|
|
28
|
-
className = _ref.className,
|
|
27
|
+
var className = _ref.className,
|
|
29
28
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
30
29
|
|
|
31
30
|
var prefix = usePrefix.usePrefix();
|
|
32
31
|
|
|
33
|
-
var props = _rollupPluginBabelHelpers.objectSpread2({
|
|
34
|
-
style: style
|
|
35
|
-
}, rest);
|
|
32
|
+
var props = _rollupPluginBabelHelpers.objectSpread2({}, rest);
|
|
36
33
|
|
|
37
34
|
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
|
|
38
35
|
className: cx__default["default"]("".concat(prefix, "--icon--skeleton"), className)
|
|
@@ -43,12 +40,7 @@ IconSkeleton.propTypes = {
|
|
|
43
40
|
/**
|
|
44
41
|
* Specify an optional className to add.
|
|
45
42
|
*/
|
|
46
|
-
className: PropTypes__default["default"].string
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* The CSS styles.
|
|
50
|
-
*/
|
|
51
|
-
style: PropTypes__default["default"].object
|
|
43
|
+
className: PropTypes__default["default"].string
|
|
52
44
|
};
|
|
53
45
|
var IconSkeleton$1 = IconSkeleton;
|
|
54
46
|
|
|
@@ -326,9 +326,9 @@ NumberInput.propTypes = {
|
|
|
326
326
|
min: PropTypes__default["default"].number,
|
|
327
327
|
|
|
328
328
|
/**
|
|
329
|
-
*
|
|
330
|
-
*
|
|
331
|
-
*
|
|
329
|
+
* Provide an optional handler that is called when the internal state of
|
|
330
|
+
* NumberInput changes. This handler is called with event and state info.
|
|
331
|
+
* `(event, { value, direction }) => void`
|
|
332
332
|
*/
|
|
333
333
|
onChange: PropTypes__default["default"].func,
|
|
334
334
|
|
|
@@ -81,7 +81,7 @@ var TileGroup = /*#__PURE__*/function (_React$Component) {
|
|
|
81
81
|
_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "renderLegend", function (legend) {
|
|
82
82
|
if (legend) {
|
|
83
83
|
return /*#__PURE__*/React__default["default"].createElement("legend", {
|
|
84
|
-
className: "".concat(_this.
|
|
84
|
+
className: "".concat(_this.context, "--label")
|
|
85
85
|
}, legend);
|
|
86
86
|
}
|
|
87
87
|
});
|
package/lib/index.js
CHANGED
|
@@ -22,12 +22,11 @@ var index$c = require('./components/ClassPrefix/index.js');
|
|
|
22
22
|
var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
|
|
23
23
|
var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
|
|
24
24
|
var ComboBox = require('./components/ComboBox/ComboBox.js');
|
|
25
|
-
var index$d = require('./components/ComposedModal/index.js');
|
|
26
25
|
var index = require('./components/ContentSwitcher/index.js');
|
|
27
26
|
var Copy = require('./components/Copy/Copy.js');
|
|
28
27
|
var CopyButton = require('./components/CopyButton/CopyButton.js');
|
|
29
28
|
var DangerButton = require('./components/DangerButton/DangerButton.js');
|
|
30
|
-
var index$
|
|
29
|
+
var index$d = require('./components/DataTable/index.js');
|
|
31
30
|
var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
|
|
32
31
|
var DatePicker = require('./components/DatePicker/DatePicker.js');
|
|
33
32
|
var DatePickerInput = require('./components/DatePickerInput/DatePickerInput.js');
|
|
@@ -52,7 +51,7 @@ var index$3 = require('./components/OverflowMenuItem/index.js');
|
|
|
52
51
|
var index$4 = require('./components/Pagination/index.js');
|
|
53
52
|
var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
|
|
54
53
|
var PrimaryButton = require('./components/PrimaryButton/PrimaryButton.js');
|
|
55
|
-
var index$
|
|
54
|
+
var index$e = require('./components/ProgressIndicator/index.js');
|
|
56
55
|
var RadioButton = require('./components/RadioButton/RadioButton.js');
|
|
57
56
|
var RadioButtonGroup = require('./components/RadioButtonGroup/RadioButtonGroup.js');
|
|
58
57
|
var index$5 = require('./components/Search/index.js');
|
|
@@ -66,7 +65,7 @@ var SelectItem = require('./components/SelectItem/SelectItem.js');
|
|
|
66
65
|
var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js');
|
|
67
66
|
var Switch = require('./components/Switch/Switch.js');
|
|
68
67
|
var index$6 = require('./components/Slider/index.js');
|
|
69
|
-
var index$
|
|
68
|
+
var index$f = require('./components/StructuredList/index.js');
|
|
70
69
|
var index$7 = require('./components/Tab/index.js');
|
|
71
70
|
var TabContent = require('./components/TabContent/TabContent.js');
|
|
72
71
|
var index$8 = require('./components/Tabs/index.js');
|
|
@@ -75,14 +74,14 @@ var Tag = require('./components/Tag/Tag.js');
|
|
|
75
74
|
var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
|
|
76
75
|
var TextArea = require('./components/TextArea/TextArea.js');
|
|
77
76
|
require('./components/TextInput/index.js');
|
|
78
|
-
var index$
|
|
77
|
+
var index$g = require('./components/Tile/index.js');
|
|
79
78
|
var RadioTile = require('./components/RadioTile/RadioTile.js');
|
|
80
79
|
var index$9 = require('./components/TileGroup/index.js');
|
|
81
80
|
var index$a = require('./components/TimePicker/index.js');
|
|
82
81
|
var index$b = require('./components/TimePickerSelect/index.js');
|
|
83
82
|
var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
|
|
84
83
|
var Toggle = require('./components/Toggle/Toggle.js');
|
|
85
|
-
var index$
|
|
84
|
+
var index$h = require('./components/Toggletip/index.js');
|
|
86
85
|
var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
|
|
87
86
|
var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
|
|
88
87
|
var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
|
|
@@ -99,17 +98,17 @@ var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
|
|
|
99
98
|
var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
|
|
100
99
|
var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
|
|
101
100
|
var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
|
|
102
|
-
var index$
|
|
103
|
-
var index$
|
|
104
|
-
var index$
|
|
105
|
-
var index$
|
|
101
|
+
var index$i = require('./components/FeatureFlags/index.js');
|
|
102
|
+
var index$j = require('./components/Heading/index.js');
|
|
103
|
+
var index$k = require('./components/IconButton/index.js');
|
|
104
|
+
var index$l = require('./components/Layer/index.js');
|
|
106
105
|
require('./components/Menu/index.js');
|
|
107
|
-
var index$
|
|
108
|
-
var index$
|
|
109
|
-
var index$
|
|
106
|
+
var index$m = require('./components/OverflowMenuV2/index.js');
|
|
107
|
+
var index$n = require('./components/Popover/index.js');
|
|
108
|
+
var index$o = require('./components/Stack/index.js');
|
|
110
109
|
var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
|
|
111
110
|
require('./components/TreeView/index.js');
|
|
112
|
-
var index$
|
|
111
|
+
var index$p = require('./components/Theme/index.js');
|
|
113
112
|
var usePrefix = require('./internal/usePrefix.js');
|
|
114
113
|
var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
|
|
115
114
|
var Filename = require('./components/FileUploader/Filename.js');
|
|
@@ -144,6 +143,8 @@ var TreeView = require('./components/TreeView/TreeView.js');
|
|
|
144
143
|
var Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
|
|
145
144
|
var BreadcrumbItem = require('./components/Breadcrumb/BreadcrumbItem.js');
|
|
146
145
|
var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
|
|
146
|
+
var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
|
|
147
|
+
var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
|
|
147
148
|
var Table = require('./components/DataTable/Table.js');
|
|
148
149
|
var TableActionList = require('./components/DataTable/TableActionList.js');
|
|
149
150
|
var TableBatchAction = require('./components/DataTable/TableBatchAction.js');
|
|
@@ -215,14 +216,11 @@ exports.ClassPrefix = index$c.ClassPrefix;
|
|
|
215
216
|
exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
|
|
216
217
|
exports.CodeSnippet = CodeSnippet["default"];
|
|
217
218
|
exports.ComboBox = ComboBox["default"];
|
|
218
|
-
exports.ComposedModal = index$d.ComposedModal;
|
|
219
|
-
exports.ModalFooter = index$d.ModalFooter;
|
|
220
|
-
exports.ModalHeader = index$d.ModalHeader;
|
|
221
219
|
exports.ContentSwitcher = index["default"];
|
|
222
220
|
exports.Copy = Copy["default"];
|
|
223
221
|
exports.CopyButton = CopyButton["default"];
|
|
224
222
|
exports.DangerButton = DangerButton["default"];
|
|
225
|
-
exports.DataTable = index$
|
|
223
|
+
exports.DataTable = index$d["default"];
|
|
226
224
|
exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
|
|
227
225
|
exports.DatePicker = DatePicker["default"];
|
|
228
226
|
exports.DatePickerInput = DatePickerInput["default"];
|
|
@@ -246,7 +244,7 @@ exports.OverflowMenuItem = index$3["default"];
|
|
|
246
244
|
exports.Pagination = index$4["default"];
|
|
247
245
|
exports.PaginationNav = PaginationNav["default"];
|
|
248
246
|
exports.PrimaryButton = PrimaryButton["default"];
|
|
249
|
-
exports.ProgressIndicator = index$
|
|
247
|
+
exports.ProgressIndicator = index$e.ProgressIndicator;
|
|
250
248
|
exports.RadioButton = RadioButton["default"];
|
|
251
249
|
exports.RadioButtonGroup = RadioButtonGroup["default"];
|
|
252
250
|
exports.Search = index$5["default"];
|
|
@@ -260,12 +258,12 @@ exports.SelectItem = SelectItem["default"];
|
|
|
260
258
|
exports.SelectItemGroup = SelectItemGroup["default"];
|
|
261
259
|
exports.Switch = Switch["default"];
|
|
262
260
|
exports.Slider = index$6["default"];
|
|
263
|
-
exports.StructuredListBody = index$
|
|
264
|
-
exports.StructuredListCell = index$
|
|
265
|
-
exports.StructuredListHead = index$
|
|
266
|
-
exports.StructuredListInput = index$
|
|
267
|
-
exports.StructuredListRow = index$
|
|
268
|
-
exports.StructuredListWrapper = index$
|
|
261
|
+
exports.StructuredListBody = index$f.StructuredListBody;
|
|
262
|
+
exports.StructuredListCell = index$f.StructuredListCell;
|
|
263
|
+
exports.StructuredListHead = index$f.StructuredListHead;
|
|
264
|
+
exports.StructuredListInput = index$f.StructuredListInput;
|
|
265
|
+
exports.StructuredListRow = index$f.StructuredListRow;
|
|
266
|
+
exports.StructuredListWrapper = index$f.StructuredListWrapper;
|
|
269
267
|
exports.Tab = index$7["default"];
|
|
270
268
|
exports.TabContent = TabContent["default"];
|
|
271
269
|
exports.Tabs = index$8["default"];
|
|
@@ -273,23 +271,23 @@ exports.TagSkeleton = Tag_Skeleton["default"];
|
|
|
273
271
|
exports.Tag = Tag["default"];
|
|
274
272
|
exports.TextAreaSkeleton = TextArea_Skeleton["default"];
|
|
275
273
|
exports.TextArea = TextArea["default"];
|
|
276
|
-
exports.ClickableTile = index$
|
|
277
|
-
exports.ExpandableTile = index$
|
|
278
|
-
exports.SelectableTile = index$
|
|
279
|
-
exports.Tile = index$
|
|
280
|
-
exports.TileAboveTheFoldContent = index$
|
|
281
|
-
exports.TileBelowTheFoldContent = index$
|
|
274
|
+
exports.ClickableTile = index$g.ClickableTile;
|
|
275
|
+
exports.ExpandableTile = index$g.ExpandableTile;
|
|
276
|
+
exports.SelectableTile = index$g.SelectableTile;
|
|
277
|
+
exports.Tile = index$g.Tile;
|
|
278
|
+
exports.TileAboveTheFoldContent = index$g.TileAboveTheFoldContent;
|
|
279
|
+
exports.TileBelowTheFoldContent = index$g.TileBelowTheFoldContent;
|
|
282
280
|
exports.RadioTile = RadioTile["default"];
|
|
283
281
|
exports.TileGroup = index$9["default"];
|
|
284
282
|
exports.TimePicker = index$a["default"];
|
|
285
283
|
exports.TimePickerSelect = index$b["default"];
|
|
286
284
|
exports.ToggleSkeleton = Toggle_Skeleton["default"];
|
|
287
285
|
exports.Toggle = Toggle.Toggle;
|
|
288
|
-
exports.Toggletip = index$
|
|
289
|
-
exports.ToggletipActions = index$
|
|
290
|
-
exports.ToggletipButton = index$
|
|
291
|
-
exports.ToggletipContent = index$
|
|
292
|
-
exports.ToggletipLabel = index$
|
|
286
|
+
exports.Toggletip = index$h.Toggletip;
|
|
287
|
+
exports.ToggletipActions = index$h.ToggletipActions;
|
|
288
|
+
exports.ToggletipButton = index$h.ToggletipButton;
|
|
289
|
+
exports.ToggletipContent = index$h.ToggletipContent;
|
|
290
|
+
exports.ToggletipLabel = index$h.ToggletipLabel;
|
|
293
291
|
exports.UnorderedList = UnorderedList["default"];
|
|
294
292
|
exports.SkeletonText = SkeletonText["default"];
|
|
295
293
|
exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
|
|
@@ -306,23 +304,23 @@ exports.TabsSkeleton = Tabs_Skeleton["default"];
|
|
|
306
304
|
exports.TextInputSkeleton = TextInput_Skeleton["default"];
|
|
307
305
|
exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
|
|
308
306
|
exports.IconSkeleton = Icon_Skeleton["default"];
|
|
309
|
-
exports.unstable_FeatureFlags = index$
|
|
310
|
-
exports.unstable_useFeatureFlag = index$
|
|
311
|
-
exports.unstable_useFeatureFlags = index$
|
|
312
|
-
exports.Heading = index$
|
|
313
|
-
exports.Section = index$
|
|
314
|
-
exports.IconButton = index$
|
|
315
|
-
exports.Layer = index$
|
|
316
|
-
exports.useLayer = index$
|
|
317
|
-
exports.unstable_OverflowMenuV2 = index$
|
|
318
|
-
exports.Popover = index$
|
|
319
|
-
exports.PopoverContent = index$
|
|
320
|
-
exports.HStack = index$
|
|
321
|
-
exports.VStack = index$
|
|
307
|
+
exports.unstable_FeatureFlags = index$i.FeatureFlags;
|
|
308
|
+
exports.unstable_useFeatureFlag = index$i.useFeatureFlag;
|
|
309
|
+
exports.unstable_useFeatureFlags = index$i.useFeatureFlags;
|
|
310
|
+
exports.Heading = index$j.Heading;
|
|
311
|
+
exports.Section = index$j.Section;
|
|
312
|
+
exports.IconButton = index$k.IconButton;
|
|
313
|
+
exports.Layer = index$l.Layer;
|
|
314
|
+
exports.useLayer = index$l.useLayer;
|
|
315
|
+
exports.unstable_OverflowMenuV2 = index$m.OverflowMenuV2;
|
|
316
|
+
exports.Popover = index$n.Popover;
|
|
317
|
+
exports.PopoverContent = index$n.PopoverContent;
|
|
318
|
+
exports.HStack = index$o.HStack;
|
|
319
|
+
exports.VStack = index$o.VStack;
|
|
322
320
|
exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
|
|
323
|
-
exports.GlobalTheme = index$
|
|
324
|
-
exports.Theme = index$
|
|
325
|
-
exports.useTheme = index$
|
|
321
|
+
exports.GlobalTheme = index$p.GlobalTheme;
|
|
322
|
+
exports.Theme = index$p.Theme;
|
|
323
|
+
exports.useTheme = index$p.useTheme;
|
|
326
324
|
exports.usePrefix = usePrefix.usePrefix;
|
|
327
325
|
exports.AspectRatio = AspectRatio["default"];
|
|
328
326
|
exports.Filename = Filename["default"];
|
|
@@ -356,7 +354,10 @@ exports.unstable_Menu = Menu["default"];
|
|
|
356
354
|
exports.unstable_TreeView = TreeView["default"];
|
|
357
355
|
exports.Breadcrumb = Breadcrumb["default"];
|
|
358
356
|
exports.BreadcrumbItem = BreadcrumbItem["default"];
|
|
357
|
+
exports.ComposedModal = ComposedModal["default"];
|
|
359
358
|
exports.ModalBody = ComposedModal.ModalBody;
|
|
359
|
+
exports.ModalHeader = ModalHeader.ModalHeader;
|
|
360
|
+
exports.ModalFooter = ModalFooter.ModalFooter;
|
|
360
361
|
exports.Table = Table["default"];
|
|
361
362
|
exports.TableActionList = TableActionList["default"];
|
|
362
363
|
exports.TableBatchAction = TableBatchAction["default"];
|
|
@@ -21,7 +21,7 @@ var warning = require('./warning.js');
|
|
|
21
21
|
* owners of controlled components.
|
|
22
22
|
*
|
|
23
23
|
* Note: this hook will warn if a component is switching from controlled to
|
|
24
|
-
* uncontrolled, or vice-
|
|
24
|
+
* uncontrolled, or vice-versa.
|
|
25
25
|
*
|
|
26
26
|
* @param {object} config
|
|
27
27
|
* @param {string} config.name - the name of the custom component
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/react",
|
|
3
3
|
"description": "React components for the Carbon Design System",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.10.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@carbon/feature-flags": "^0.8.0",
|
|
47
47
|
"@carbon/icons-react": "^11.7.0",
|
|
48
48
|
"@carbon/layout": "^11.5.0",
|
|
49
|
-
"@carbon/styles": "^1.
|
|
49
|
+
"@carbon/styles": "^1.10.0-rc.0",
|
|
50
50
|
"@carbon/telemetry": "0.1.0",
|
|
51
51
|
"classnames": "2.3.1",
|
|
52
52
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"@babel/preset-env": "^7.18.2",
|
|
74
74
|
"@babel/preset-react": "^7.17.12",
|
|
75
75
|
"@carbon/test-utils": "^10.25.0",
|
|
76
|
-
"@carbon/themes": "^11.
|
|
76
|
+
"@carbon/themes": "^11.7.0-rc.0",
|
|
77
77
|
"@rollup/plugin-babel": "^5.3.0",
|
|
78
78
|
"@rollup/plugin-commonjs": "^21.0.0",
|
|
79
79
|
"@rollup/plugin-node-resolve": "^13.0.0",
|
|
@@ -129,5 +129,5 @@
|
|
|
129
129
|
"**/*.scss",
|
|
130
130
|
"**/*.css"
|
|
131
131
|
],
|
|
132
|
-
"gitHead": "
|
|
132
|
+
"gitHead": "ca0be10be837f9b2269c658d7c81c494147824d9"
|
|
133
133
|
}
|
|
@@ -1,19 +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 * as FeatureFlags from '@carbon/feature-flags';
|
|
9
|
-
import { ModalHeader as ModalHeader$1 } from './next/ModalHeader.js';
|
|
10
|
-
import { ModalFooter as ModalFooter$1 } from './next/ModalFooter.js';
|
|
11
|
-
import ComposedModalNext from './next/ComposedModal.js';
|
|
12
|
-
import ComposedModal$1, { ModalHeader as ModalHeader$2, ModalFooter as ModalFooter$2 } from './ComposedModal.js';
|
|
13
|
-
export { ModalBody } from './ComposedModal.js';
|
|
14
|
-
|
|
15
|
-
var ModalHeader = FeatureFlags.enabled('enable-v11-release') ? ModalHeader$1 : ModalHeader$2;
|
|
16
|
-
var ModalFooter = FeatureFlags.enabled('enable-v11-release') ? ModalFooter$1 : ModalFooter$2;
|
|
17
|
-
var ComposedModal = FeatureFlags.enabled('enable-v11-release') ? ComposedModalNext : ComposedModal$1;
|
|
18
|
-
|
|
19
|
-
export { ComposedModal, ModalFooter, ModalHeader };
|
|
@@ -1,225 +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 { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React__default, { useState, useRef, useEffect } from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import { ModalHeader } from './ModalHeader.js';
|
|
12
|
-
import { ModalFooter } from '../ComposedModal.js';
|
|
13
|
-
import cx from 'classnames';
|
|
14
|
-
import toggleClass from '../../../tools/toggleClass.js';
|
|
15
|
-
import requiredIfGivenPropIsTruthy from '../../../prop-types/requiredIfGivenPropIsTruthy.js';
|
|
16
|
-
import wrapFocus from '../../../internal/wrapFocus.js';
|
|
17
|
-
import { usePrefix } from '../../../internal/usePrefix.js';
|
|
18
|
-
|
|
19
|
-
var _ModalBody$propTypes, _ComposedModal$propTy;
|
|
20
|
-
|
|
21
|
-
var _excluded = ["className", "children", "hasForm", "hasScrollingContent"],
|
|
22
|
-
_excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
|
|
23
|
-
var ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
|
|
24
|
-
var _cx;
|
|
25
|
-
|
|
26
|
-
var customClassName = _ref.className,
|
|
27
|
-
children = _ref.children,
|
|
28
|
-
hasForm = _ref.hasForm,
|
|
29
|
-
hasScrollingContent = _ref.hasScrollingContent,
|
|
30
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
31
|
-
|
|
32
|
-
var prefix = usePrefix();
|
|
33
|
-
var contentClass = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--modal-content"), true), _defineProperty(_cx, "".concat(prefix, "--modal-content--with-form"), hasForm), _defineProperty(_cx, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _defineProperty(_cx, customClassName, customClassName), _cx));
|
|
34
|
-
var hasScrollingContentProps = hasScrollingContent ? {
|
|
35
|
-
tabIndex: 0,
|
|
36
|
-
role: 'region'
|
|
37
|
-
} : {};
|
|
38
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({
|
|
39
|
-
className: contentClass
|
|
40
|
-
}, hasScrollingContentProps, rest, {
|
|
41
|
-
ref: ref
|
|
42
|
-
}), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
|
|
43
|
-
className: "".concat(prefix, "--modal-content--overflow-indicator")
|
|
44
|
-
}));
|
|
45
|
-
});
|
|
46
|
-
ModalBody.propTypes = (_ModalBody$propTypes = {}, _defineProperty(_ModalBody$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_ModalBody$propTypes, "children", PropTypes.node), _defineProperty(_ModalBody$propTypes, "className", PropTypes.string), _defineProperty(_ModalBody$propTypes, "hasForm", PropTypes.bool), _defineProperty(_ModalBody$propTypes, "hasScrollingContent", PropTypes.bool), _ModalBody$propTypes);
|
|
47
|
-
var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModal(_ref2, ref) {
|
|
48
|
-
var _cx2, _cx3;
|
|
49
|
-
|
|
50
|
-
var ariaLabelledBy = _ref2['aria-labelledby'],
|
|
51
|
-
ariaLabel = _ref2['aria-label'],
|
|
52
|
-
children = _ref2.children,
|
|
53
|
-
customClassName = _ref2.className,
|
|
54
|
-
containerClassName = _ref2.containerClassName,
|
|
55
|
-
danger = _ref2.danger,
|
|
56
|
-
onClose = _ref2.onClose,
|
|
57
|
-
onKeyDown = _ref2.onKeyDown,
|
|
58
|
-
open = _ref2.open,
|
|
59
|
-
preventCloseOnClickOutside = _ref2.preventCloseOnClickOutside,
|
|
60
|
-
selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
|
|
61
|
-
selectorsFloatingMenus = _ref2.selectorsFloatingMenus,
|
|
62
|
-
size = _ref2.size,
|
|
63
|
-
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
64
|
-
|
|
65
|
-
var prefix = usePrefix();
|
|
66
|
-
|
|
67
|
-
var _useState = useState(open),
|
|
68
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
69
|
-
isOpen = _useState2[0],
|
|
70
|
-
setisOpen = _useState2[1];
|
|
71
|
-
|
|
72
|
-
var _useState3 = useState(open),
|
|
73
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
74
|
-
prevOpen = _useState4[0],
|
|
75
|
-
setPrevOpen = _useState4[1];
|
|
76
|
-
|
|
77
|
-
var innerModal = useRef();
|
|
78
|
-
var button = useRef();
|
|
79
|
-
var startSentinel = useRef();
|
|
80
|
-
var endSentinel = useRef();
|
|
81
|
-
|
|
82
|
-
if (open !== prevOpen) {
|
|
83
|
-
setisOpen(open);
|
|
84
|
-
setPrevOpen(open);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function handleKeyDown(evt) {
|
|
88
|
-
// Esc key
|
|
89
|
-
if (evt.which === 27) {
|
|
90
|
-
closeModal(evt);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
onKeyDown(evt);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
function handleClick(evt) {
|
|
97
|
-
if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
if (innerModal.current && !innerModal.current.contains(evt.target)) {
|
|
102
|
-
closeModal(evt);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
function handleBlur(_ref3) {
|
|
107
|
-
var oldActiveNode = _ref3.target,
|
|
108
|
-
currentActiveNode = _ref3.relatedTarget;
|
|
109
|
-
|
|
110
|
-
if (open && currentActiveNode && oldActiveNode) {
|
|
111
|
-
var bodyNode = innerModal.current;
|
|
112
|
-
var startSentinelNode = startSentinel.current;
|
|
113
|
-
var endSentinelNode = endSentinel.current;
|
|
114
|
-
wrapFocus({
|
|
115
|
-
bodyNode: bodyNode,
|
|
116
|
-
startSentinelNode: startSentinelNode,
|
|
117
|
-
endSentinelNode: endSentinelNode,
|
|
118
|
-
currentActiveNode: currentActiveNode,
|
|
119
|
-
oldActiveNode: oldActiveNode,
|
|
120
|
-
selectorsFloatingMenus: selectorsFloatingMenus
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
function closeModal(evt) {
|
|
126
|
-
if (!onClose || onClose(evt) !== false) {
|
|
127
|
-
setisOpen(false);
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
var modalClass = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--modal"), true), _defineProperty(_cx2, 'is-visible', isOpen), _defineProperty(_cx2, customClassName, customClassName), _defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
|
|
132
|
-
var containerClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
|
|
133
|
-
|
|
134
|
-
var generatedAriaLabel;
|
|
135
|
-
var childrenWithProps = React__default.Children.toArray(children).map(function (child) {
|
|
136
|
-
switch (child.type) {
|
|
137
|
-
case React__default.createElement(ModalHeader).type:
|
|
138
|
-
generatedAriaLabel = child.props.label;
|
|
139
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
140
|
-
closeModal: closeModal
|
|
141
|
-
});
|
|
142
|
-
|
|
143
|
-
case React__default.createElement(ModalFooter).type:
|
|
144
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
145
|
-
closeModal: closeModal,
|
|
146
|
-
inputref: button
|
|
147
|
-
});
|
|
148
|
-
|
|
149
|
-
default:
|
|
150
|
-
return child;
|
|
151
|
-
}
|
|
152
|
-
});
|
|
153
|
-
useEffect(function () {
|
|
154
|
-
if (prevOpen !== isOpen) {
|
|
155
|
-
toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), isOpen);
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
useEffect(function () {
|
|
159
|
-
return function () {
|
|
160
|
-
return toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), false);
|
|
161
|
-
};
|
|
162
|
-
});
|
|
163
|
-
useEffect(function () {
|
|
164
|
-
toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), open);
|
|
165
|
-
}, [open, prefix]);
|
|
166
|
-
useEffect(function () {
|
|
167
|
-
var focusButton = function focusButton(focusContainerElement) {
|
|
168
|
-
if (focusContainerElement) {
|
|
169
|
-
var primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
|
|
170
|
-
|
|
171
|
-
if (primaryFocusElement) {
|
|
172
|
-
primaryFocusElement.focus();
|
|
173
|
-
return;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
if (button.current) {
|
|
177
|
-
button.current.focus();
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
if (!open) {
|
|
183
|
-
return;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
if (innerModal.current) {
|
|
187
|
-
focusButton(innerModal.current);
|
|
188
|
-
}
|
|
189
|
-
}, [open, selectorPrimaryFocus]);
|
|
190
|
-
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
|
191
|
-
role: "presentation",
|
|
192
|
-
ref: ref,
|
|
193
|
-
"aria-hidden": !open,
|
|
194
|
-
onBlur: handleBlur,
|
|
195
|
-
onClick: handleClick,
|
|
196
|
-
onKeyDown: handleKeyDown,
|
|
197
|
-
className: modalClass,
|
|
198
|
-
tabIndex: "-1"
|
|
199
|
-
}), /*#__PURE__*/React__default.createElement("div", {
|
|
200
|
-
className: containerClass,
|
|
201
|
-
role: "dialog",
|
|
202
|
-
"aria-modal": "true",
|
|
203
|
-
"aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
|
|
204
|
-
"aria-labelledby": ariaLabelledBy
|
|
205
|
-
}, /*#__PURE__*/React__default.createElement("button", {
|
|
206
|
-
type: "button",
|
|
207
|
-
ref: startSentinel,
|
|
208
|
-
className: "".concat(prefix, "--visually-hidden")
|
|
209
|
-
}, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
|
|
210
|
-
ref: innerModal,
|
|
211
|
-
className: "".concat(prefix, "--modal-container-body")
|
|
212
|
-
}, childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
|
|
213
|
-
type: "button",
|
|
214
|
-
ref: endSentinel,
|
|
215
|
-
className: "".concat(prefix, "--visually-hidden")
|
|
216
|
-
}, "Focus sentinel")));
|
|
217
|
-
});
|
|
218
|
-
ComposedModal.propTypes = (_ComposedModal$propTy = {}, _defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes.string), _defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes.string), _defineProperty(_ComposedModal$propTy, "children", PropTypes.node), _defineProperty(_ComposedModal$propTy, "className", PropTypes.string), _defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes.string), _defineProperty(_ComposedModal$propTy, "danger", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "onClose", PropTypes.func), _defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes.func), _defineProperty(_ComposedModal$propTy, "open", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_ComposedModal$propTy, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
|
|
219
|
-
ComposedModal.defaultProps = {
|
|
220
|
-
onKeyDown: function onKeyDown() {},
|
|
221
|
-
selectorPrimaryFocus: '[data-modal-primary-focus]'
|
|
222
|
-
};
|
|
223
|
-
var ComposedModalNext = ComposedModal;
|
|
224
|
-
|
|
225
|
-
export { ModalBody, ComposedModalNext as default };
|