@carbon/react 1.8.0-rc.0 → 1.9.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/next/ComposedModal.js +1 -1
- package/es/components/Menu/Menu.js +1 -1
- 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/NumberInput/NumberInput.Skeleton.js +3 -4
- package/es/components/NumberInput/NumberInput.js +308 -359
- package/es/index.js +3 -3
- package/lib/components/ComposedModal/next/ComposedModal.js +1 -1
- package/lib/components/Menu/Menu.js +1 -1
- 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/NumberInput/NumberInput.Skeleton.js +3 -4
- package/lib/components/NumberInput/NumberInput.js +305 -376
- package/lib/index.js +80 -80
- package/package.json +6 -6
- package/scss/utilities/_hide-at-breakpoint.scss +9 -0
- package/es/components/Modal/next/Modal.js +0 -274
- package/es/internal/FeatureFlags.js +0 -52
- package/es/prop-types/requiredIfValueExists.js +0 -32
- package/lib/components/Modal/next/Modal.js +0 -284
- package/lib/internal/FeatureFlags.js +0 -56
- package/lib/prop-types/requiredIfValueExists.js +0 -36
package/lib/index.js
CHANGED
|
@@ -18,16 +18,16 @@ var Button = require('./components/Button/Button.js');
|
|
|
18
18
|
var ButtonSet = require('./components/ButtonSet/ButtonSet.js');
|
|
19
19
|
var Checkbox_Skeleton = require('./components/Checkbox/Checkbox.Skeleton.js');
|
|
20
20
|
var Checkbox = require('./components/Checkbox/Checkbox.js');
|
|
21
|
-
var index$
|
|
21
|
+
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$
|
|
25
|
+
var index$d = require('./components/ComposedModal/index.js');
|
|
26
26
|
var index = require('./components/ContentSwitcher/index.js');
|
|
27
27
|
var Copy = require('./components/Copy/Copy.js');
|
|
28
28
|
var CopyButton = require('./components/CopyButton/CopyButton.js');
|
|
29
29
|
var DangerButton = require('./components/DangerButton/DangerButton.js');
|
|
30
|
-
var index$
|
|
30
|
+
var index$e = require('./components/DataTable/index.js');
|
|
31
31
|
var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
|
|
32
32
|
var DatePicker = require('./components/DatePicker/DatePicker.js');
|
|
33
33
|
var DatePickerInput = require('./components/DatePickerInput/DatePickerInput.js');
|
|
@@ -43,21 +43,19 @@ var InlineLoading = require('./components/InlineLoading/InlineLoading.js');
|
|
|
43
43
|
var Link = require('./components/Link/Link.js');
|
|
44
44
|
var ListItem = require('./components/ListItem/ListItem.js');
|
|
45
45
|
var Loading = require('./components/Loading/Loading.js');
|
|
46
|
-
var
|
|
46
|
+
var Modal = require('./components/Modal/Modal.js');
|
|
47
47
|
var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
|
|
48
48
|
require('./components/MultiSelect/index.js');
|
|
49
|
-
var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
|
|
50
|
-
var NumberInput = require('./components/NumberInput/NumberInput.js');
|
|
51
49
|
var OrderedList = require('./components/OrderedList/OrderedList.js');
|
|
52
|
-
var index$
|
|
53
|
-
var index$
|
|
54
|
-
var index$
|
|
50
|
+
var index$2 = require('./components/OverflowMenu/index.js');
|
|
51
|
+
var index$3 = require('./components/OverflowMenuItem/index.js');
|
|
52
|
+
var index$4 = require('./components/Pagination/index.js');
|
|
55
53
|
var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
|
|
56
54
|
var PrimaryButton = require('./components/PrimaryButton/PrimaryButton.js');
|
|
57
|
-
var index$
|
|
55
|
+
var index$f = require('./components/ProgressIndicator/index.js');
|
|
58
56
|
var RadioButton = require('./components/RadioButton/RadioButton.js');
|
|
59
57
|
var RadioButtonGroup = require('./components/RadioButtonGroup/RadioButtonGroup.js');
|
|
60
|
-
var index$
|
|
58
|
+
var index$5 = require('./components/Search/index.js');
|
|
61
59
|
var SearchFilterButton = require('./components/SearchFilterButton/SearchFilterButton.js');
|
|
62
60
|
var SearchLayoutButton = require('./components/SearchLayoutButton/SearchLayoutButton.js');
|
|
63
61
|
var ExpandableSearch = require('./components/ExpandableSearch/ExpandableSearch.js');
|
|
@@ -67,24 +65,24 @@ var Select = require('./components/Select/Select.js');
|
|
|
67
65
|
var SelectItem = require('./components/SelectItem/SelectItem.js');
|
|
68
66
|
var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js');
|
|
69
67
|
var Switch = require('./components/Switch/Switch.js');
|
|
70
|
-
var index$
|
|
71
|
-
var index$
|
|
72
|
-
var index$
|
|
68
|
+
var index$6 = require('./components/Slider/index.js');
|
|
69
|
+
var index$g = require('./components/StructuredList/index.js');
|
|
70
|
+
var index$7 = require('./components/Tab/index.js');
|
|
73
71
|
var TabContent = require('./components/TabContent/TabContent.js');
|
|
74
|
-
var index$
|
|
72
|
+
var index$8 = require('./components/Tabs/index.js');
|
|
75
73
|
var Tag_Skeleton = require('./components/Tag/Tag.Skeleton.js');
|
|
76
74
|
var Tag = require('./components/Tag/Tag.js');
|
|
77
75
|
var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
|
|
78
76
|
var TextArea = require('./components/TextArea/TextArea.js');
|
|
79
77
|
require('./components/TextInput/index.js');
|
|
80
|
-
var index$
|
|
78
|
+
var index$h = require('./components/Tile/index.js');
|
|
81
79
|
var RadioTile = require('./components/RadioTile/RadioTile.js');
|
|
82
|
-
var index$
|
|
83
|
-
var index$
|
|
84
|
-
var index$
|
|
80
|
+
var index$9 = require('./components/TileGroup/index.js');
|
|
81
|
+
var index$a = require('./components/TimePicker/index.js');
|
|
82
|
+
var index$b = require('./components/TimePickerSelect/index.js');
|
|
85
83
|
var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
|
|
86
84
|
var Toggle = require('./components/Toggle/Toggle.js');
|
|
87
|
-
var index$
|
|
85
|
+
var index$i = require('./components/Toggletip/index.js');
|
|
88
86
|
var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
|
|
89
87
|
var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
|
|
90
88
|
var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
|
|
@@ -101,17 +99,17 @@ var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
|
|
|
101
99
|
var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
|
|
102
100
|
var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
|
|
103
101
|
var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
|
|
104
|
-
var index$
|
|
105
|
-
var index$
|
|
106
|
-
var index$
|
|
107
|
-
var index$
|
|
102
|
+
var index$j = require('./components/FeatureFlags/index.js');
|
|
103
|
+
var index$k = require('./components/Heading/index.js');
|
|
104
|
+
var index$l = require('./components/IconButton/index.js');
|
|
105
|
+
var index$m = require('./components/Layer/index.js');
|
|
108
106
|
require('./components/Menu/index.js');
|
|
109
|
-
var index$
|
|
110
|
-
var index$
|
|
111
|
-
var index$
|
|
107
|
+
var index$n = require('./components/OverflowMenuV2/index.js');
|
|
108
|
+
var index$o = require('./components/Popover/index.js');
|
|
109
|
+
var index$p = require('./components/Stack/index.js');
|
|
112
110
|
var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
|
|
113
111
|
require('./components/TreeView/index.js');
|
|
114
|
-
var index$
|
|
112
|
+
var index$q = require('./components/Theme/index.js');
|
|
115
113
|
var usePrefix = require('./internal/usePrefix.js');
|
|
116
114
|
var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
|
|
117
115
|
var Filename = require('./components/FileUploader/Filename.js');
|
|
@@ -120,6 +118,7 @@ var FileUploaderDropContainer = require('./components/FileUploader/FileUploaderD
|
|
|
120
118
|
var FileUploaderItem = require('./components/FileUploader/FileUploaderItem.js');
|
|
121
119
|
var Row = require('./components/Grid/Row.js');
|
|
122
120
|
var Column = require('./components/Grid/Column.js');
|
|
121
|
+
var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
|
|
123
122
|
var HeaderMenuButton = require('./components/UIShell/HeaderMenuButton.js');
|
|
124
123
|
var HeaderName = require('./components/UIShell/HeaderName.js');
|
|
125
124
|
var SkipToContent = require('./components/UIShell/SkipToContent.js');
|
|
@@ -172,6 +171,7 @@ var Grid = require('./components/Grid/Grid.js');
|
|
|
172
171
|
var ColumnHang = require('./components/Grid/ColumnHang.js');
|
|
173
172
|
var FlexGrid = require('./components/Grid/FlexGrid.js');
|
|
174
173
|
var Notification = require('./components/Notification/Notification.js');
|
|
174
|
+
var NumberInput = require('./components/NumberInput/NumberInput.js');
|
|
175
175
|
var ControlledPasswordInput = require('./components/TextInput/ControlledPasswordInput.js');
|
|
176
176
|
var PasswordInput = require('./components/TextInput/PasswordInput.js');
|
|
177
177
|
var ProgressIndicator = require('./components/ProgressIndicator/ProgressIndicator.js');
|
|
@@ -211,18 +211,18 @@ exports.Button = Button["default"];
|
|
|
211
211
|
exports.ButtonSet = ButtonSet["default"];
|
|
212
212
|
exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
|
|
213
213
|
exports.Checkbox = Checkbox["default"];
|
|
214
|
-
exports.ClassPrefix = index$
|
|
214
|
+
exports.ClassPrefix = index$c.ClassPrefix;
|
|
215
215
|
exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
|
|
216
216
|
exports.CodeSnippet = CodeSnippet["default"];
|
|
217
217
|
exports.ComboBox = ComboBox["default"];
|
|
218
|
-
exports.ComposedModal = index$
|
|
219
|
-
exports.ModalFooter = index$
|
|
220
|
-
exports.ModalHeader = index$
|
|
218
|
+
exports.ComposedModal = index$d.ComposedModal;
|
|
219
|
+
exports.ModalFooter = index$d.ModalFooter;
|
|
220
|
+
exports.ModalHeader = index$d.ModalHeader;
|
|
221
221
|
exports.ContentSwitcher = index["default"];
|
|
222
222
|
exports.Copy = Copy["default"];
|
|
223
223
|
exports.CopyButton = CopyButton["default"];
|
|
224
224
|
exports.DangerButton = DangerButton["default"];
|
|
225
|
-
exports.DataTable = index$
|
|
225
|
+
exports.DataTable = index$e["default"];
|
|
226
226
|
exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
|
|
227
227
|
exports.DatePicker = DatePicker["default"];
|
|
228
228
|
exports.DatePickerInput = DatePickerInput["default"];
|
|
@@ -238,20 +238,18 @@ exports.InlineLoading = InlineLoading["default"];
|
|
|
238
238
|
exports.Link = Link["default"];
|
|
239
239
|
exports.ListItem = ListItem["default"];
|
|
240
240
|
exports.Loading = Loading["default"];
|
|
241
|
-
exports.Modal =
|
|
241
|
+
exports.Modal = Modal["default"];
|
|
242
242
|
exports.ModalWrapper = ModalWrapper["default"];
|
|
243
|
-
exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
|
|
244
|
-
exports.NumberInput = NumberInput["default"];
|
|
245
243
|
exports.OrderedList = OrderedList["default"];
|
|
246
|
-
exports.OverflowMenu = index$
|
|
247
|
-
exports.OverflowMenuItem = index$
|
|
248
|
-
exports.Pagination = index$
|
|
244
|
+
exports.OverflowMenu = index$2["default"];
|
|
245
|
+
exports.OverflowMenuItem = index$3["default"];
|
|
246
|
+
exports.Pagination = index$4["default"];
|
|
249
247
|
exports.PaginationNav = PaginationNav["default"];
|
|
250
248
|
exports.PrimaryButton = PrimaryButton["default"];
|
|
251
|
-
exports.ProgressIndicator = index$
|
|
249
|
+
exports.ProgressIndicator = index$f.ProgressIndicator;
|
|
252
250
|
exports.RadioButton = RadioButton["default"];
|
|
253
251
|
exports.RadioButtonGroup = RadioButtonGroup["default"];
|
|
254
|
-
exports.Search = index$
|
|
252
|
+
exports.Search = index$5["default"];
|
|
255
253
|
exports.SearchFilterButton = SearchFilterButton["default"];
|
|
256
254
|
exports.SearchLayoutButton = SearchLayoutButton["default"];
|
|
257
255
|
exports.ExpandableSearch = ExpandableSearch["default"];
|
|
@@ -261,37 +259,37 @@ exports.Select = Select["default"];
|
|
|
261
259
|
exports.SelectItem = SelectItem["default"];
|
|
262
260
|
exports.SelectItemGroup = SelectItemGroup["default"];
|
|
263
261
|
exports.Switch = Switch["default"];
|
|
264
|
-
exports.Slider = index$
|
|
265
|
-
exports.StructuredListBody = index$
|
|
266
|
-
exports.StructuredListCell = index$
|
|
267
|
-
exports.StructuredListHead = index$
|
|
268
|
-
exports.StructuredListInput = index$
|
|
269
|
-
exports.StructuredListRow = index$
|
|
270
|
-
exports.StructuredListWrapper = index$
|
|
271
|
-
exports.Tab = index$
|
|
262
|
+
exports.Slider = index$6["default"];
|
|
263
|
+
exports.StructuredListBody = index$g.StructuredListBody;
|
|
264
|
+
exports.StructuredListCell = index$g.StructuredListCell;
|
|
265
|
+
exports.StructuredListHead = index$g.StructuredListHead;
|
|
266
|
+
exports.StructuredListInput = index$g.StructuredListInput;
|
|
267
|
+
exports.StructuredListRow = index$g.StructuredListRow;
|
|
268
|
+
exports.StructuredListWrapper = index$g.StructuredListWrapper;
|
|
269
|
+
exports.Tab = index$7["default"];
|
|
272
270
|
exports.TabContent = TabContent["default"];
|
|
273
|
-
exports.Tabs = index$
|
|
271
|
+
exports.Tabs = index$8["default"];
|
|
274
272
|
exports.TagSkeleton = Tag_Skeleton["default"];
|
|
275
273
|
exports.Tag = Tag["default"];
|
|
276
274
|
exports.TextAreaSkeleton = TextArea_Skeleton["default"];
|
|
277
275
|
exports.TextArea = TextArea["default"];
|
|
278
|
-
exports.ClickableTile = index$
|
|
279
|
-
exports.ExpandableTile = index$
|
|
280
|
-
exports.SelectableTile = index$
|
|
281
|
-
exports.Tile = index$
|
|
282
|
-
exports.TileAboveTheFoldContent = index$
|
|
283
|
-
exports.TileBelowTheFoldContent = index$
|
|
276
|
+
exports.ClickableTile = index$h.ClickableTile;
|
|
277
|
+
exports.ExpandableTile = index$h.ExpandableTile;
|
|
278
|
+
exports.SelectableTile = index$h.SelectableTile;
|
|
279
|
+
exports.Tile = index$h.Tile;
|
|
280
|
+
exports.TileAboveTheFoldContent = index$h.TileAboveTheFoldContent;
|
|
281
|
+
exports.TileBelowTheFoldContent = index$h.TileBelowTheFoldContent;
|
|
284
282
|
exports.RadioTile = RadioTile["default"];
|
|
285
|
-
exports.TileGroup = index$
|
|
286
|
-
exports.TimePicker = index$
|
|
287
|
-
exports.TimePickerSelect = index$
|
|
283
|
+
exports.TileGroup = index$9["default"];
|
|
284
|
+
exports.TimePicker = index$a["default"];
|
|
285
|
+
exports.TimePickerSelect = index$b["default"];
|
|
288
286
|
exports.ToggleSkeleton = Toggle_Skeleton["default"];
|
|
289
287
|
exports.Toggle = Toggle.Toggle;
|
|
290
|
-
exports.Toggletip = index$
|
|
291
|
-
exports.ToggletipActions = index$
|
|
292
|
-
exports.ToggletipButton = index$
|
|
293
|
-
exports.ToggletipContent = index$
|
|
294
|
-
exports.ToggletipLabel = index$
|
|
288
|
+
exports.Toggletip = index$i.Toggletip;
|
|
289
|
+
exports.ToggletipActions = index$i.ToggletipActions;
|
|
290
|
+
exports.ToggletipButton = index$i.ToggletipButton;
|
|
291
|
+
exports.ToggletipContent = index$i.ToggletipContent;
|
|
292
|
+
exports.ToggletipLabel = index$i.ToggletipLabel;
|
|
295
293
|
exports.UnorderedList = UnorderedList["default"];
|
|
296
294
|
exports.SkeletonText = SkeletonText["default"];
|
|
297
295
|
exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
|
|
@@ -308,23 +306,23 @@ exports.TabsSkeleton = Tabs_Skeleton["default"];
|
|
|
308
306
|
exports.TextInputSkeleton = TextInput_Skeleton["default"];
|
|
309
307
|
exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
|
|
310
308
|
exports.IconSkeleton = Icon_Skeleton["default"];
|
|
311
|
-
exports.unstable_FeatureFlags = index$
|
|
312
|
-
exports.unstable_useFeatureFlag = index$
|
|
313
|
-
exports.unstable_useFeatureFlags = index$
|
|
314
|
-
exports.Heading = index$
|
|
315
|
-
exports.Section = index$
|
|
316
|
-
exports.IconButton = index$
|
|
317
|
-
exports.Layer = index$
|
|
318
|
-
exports.useLayer = index$
|
|
319
|
-
exports.unstable_OverflowMenuV2 = index$
|
|
320
|
-
exports.Popover = index$
|
|
321
|
-
exports.PopoverContent = index$
|
|
322
|
-
exports.HStack = index$
|
|
323
|
-
exports.VStack = index$
|
|
309
|
+
exports.unstable_FeatureFlags = index$j.FeatureFlags;
|
|
310
|
+
exports.unstable_useFeatureFlag = index$j.useFeatureFlag;
|
|
311
|
+
exports.unstable_useFeatureFlags = index$j.useFeatureFlags;
|
|
312
|
+
exports.Heading = index$k.Heading;
|
|
313
|
+
exports.Section = index$k.Section;
|
|
314
|
+
exports.IconButton = index$l.IconButton;
|
|
315
|
+
exports.Layer = index$m.Layer;
|
|
316
|
+
exports.useLayer = index$m.useLayer;
|
|
317
|
+
exports.unstable_OverflowMenuV2 = index$n.OverflowMenuV2;
|
|
318
|
+
exports.Popover = index$o.Popover;
|
|
319
|
+
exports.PopoverContent = index$o.PopoverContent;
|
|
320
|
+
exports.HStack = index$p.HStack;
|
|
321
|
+
exports.VStack = index$p.VStack;
|
|
324
322
|
exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
|
|
325
|
-
exports.GlobalTheme = index$
|
|
326
|
-
exports.Theme = index$
|
|
327
|
-
exports.useTheme = index$
|
|
323
|
+
exports.GlobalTheme = index$q.GlobalTheme;
|
|
324
|
+
exports.Theme = index$q.Theme;
|
|
325
|
+
exports.useTheme = index$q.useTheme;
|
|
328
326
|
exports.usePrefix = usePrefix.usePrefix;
|
|
329
327
|
exports.AspectRatio = AspectRatio["default"];
|
|
330
328
|
exports.Filename = Filename["default"];
|
|
@@ -333,6 +331,7 @@ exports.FileUploaderDropContainer = FileUploaderDropContainer["default"];
|
|
|
333
331
|
exports.FileUploaderItem = FileUploaderItem["default"];
|
|
334
332
|
exports.Row = Row["default"];
|
|
335
333
|
exports.Column = Column["default"];
|
|
334
|
+
exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
|
|
336
335
|
exports.HeaderMenuButton = HeaderMenuButton["default"];
|
|
337
336
|
exports.HeaderName = HeaderName["default"];
|
|
338
337
|
exports.SkipToContent = SkipToContent["default"];
|
|
@@ -389,6 +388,7 @@ exports.InlineNotification = Notification.InlineNotification;
|
|
|
389
388
|
exports.NotificationActionButton = Notification.NotificationActionButton;
|
|
390
389
|
exports.NotificationButton = Notification.NotificationButton;
|
|
391
390
|
exports.ToastNotification = Notification.ToastNotification;
|
|
391
|
+
exports.NumberInput = NumberInput.NumberInput;
|
|
392
392
|
exports.ControlledPasswordInput = ControlledPasswordInput["default"];
|
|
393
393
|
exports.PasswordInput = PasswordInput["default"];
|
|
394
394
|
exports.ProgressStep = ProgressIndicator.ProgressStep;
|
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.9.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@babel/runtime": "^7.18.3",
|
|
46
46
|
"@carbon/feature-flags": "^0.8.0",
|
|
47
|
-
"@carbon/icons-react": "^11.
|
|
48
|
-
"@carbon/layout": "^11.
|
|
49
|
-
"@carbon/styles": "^1.
|
|
47
|
+
"@carbon/icons-react": "^11.7.0",
|
|
48
|
+
"@carbon/layout": "^11.5.0",
|
|
49
|
+
"@carbon/styles": "^1.9.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.6.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": "182eaa898977e15b0cbedf4b8b62502693d43b4c"
|
|
133
133
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/utilities/hide-at-breakpoint';
|
|
@@ -1,274 +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, { useRef, useEffect } from 'react';
|
|
11
|
-
import cx from 'classnames';
|
|
12
|
-
import { Close } from '@carbon/icons-react';
|
|
13
|
-
import toggleClass from '../../../tools/toggleClass.js';
|
|
14
|
-
import Button from '../../Button/Button.js';
|
|
15
|
-
import ButtonSet from '../../ButtonSet/ButtonSet.js';
|
|
16
|
-
import requiredIfGivenPropIsTruthy from '../../../prop-types/requiredIfGivenPropIsTruthy.js';
|
|
17
|
-
import wrapFocus, { elementOrParentIsFloatingMenu } from '../../../internal/wrapFocus.js';
|
|
18
|
-
import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
|
|
19
|
-
import { usePrefix } from '../../../internal/usePrefix.js';
|
|
20
|
-
|
|
21
|
-
var _Modal$propTypes;
|
|
22
|
-
|
|
23
|
-
var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
|
|
24
|
-
var getInstanceId = setupGetInstanceId();
|
|
25
|
-
var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
|
|
26
|
-
var _classNames;
|
|
27
|
-
|
|
28
|
-
var children = _ref.children,
|
|
29
|
-
className = _ref.className,
|
|
30
|
-
modalHeading = _ref.modalHeading,
|
|
31
|
-
modalLabel = _ref.modalLabel,
|
|
32
|
-
modalAriaLabel = _ref.modalAriaLabel,
|
|
33
|
-
passiveModal = _ref.passiveModal,
|
|
34
|
-
secondaryButtonText = _ref.secondaryButtonText,
|
|
35
|
-
primaryButtonText = _ref.primaryButtonText,
|
|
36
|
-
open = _ref.open,
|
|
37
|
-
onRequestClose = _ref.onRequestClose,
|
|
38
|
-
onRequestSubmit = _ref.onRequestSubmit,
|
|
39
|
-
onSecondarySubmit = _ref.onSecondarySubmit,
|
|
40
|
-
primaryButtonDisabled = _ref.primaryButtonDisabled,
|
|
41
|
-
danger = _ref.danger,
|
|
42
|
-
alert = _ref.alert,
|
|
43
|
-
secondaryButtons = _ref.secondaryButtons,
|
|
44
|
-
selectorPrimaryFocus = _ref.selectorPrimaryFocus,
|
|
45
|
-
selectorsFloatingMenus = _ref.selectorsFloatingMenus,
|
|
46
|
-
shouldSubmitOnEnter = _ref.shouldSubmitOnEnter,
|
|
47
|
-
size = _ref.size,
|
|
48
|
-
hasScrollingContent = _ref.hasScrollingContent,
|
|
49
|
-
closeButtonLabel = _ref.closeButtonLabel,
|
|
50
|
-
preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
|
|
51
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
52
|
-
|
|
53
|
-
var prefix = usePrefix();
|
|
54
|
-
var button = useRef();
|
|
55
|
-
var secondaryButton = useRef();
|
|
56
|
-
var innerModal = useRef();
|
|
57
|
-
var startTrap = useRef();
|
|
58
|
-
var endTrap = useRef();
|
|
59
|
-
var modalInstanceId = "modal-".concat(getInstanceId());
|
|
60
|
-
var modalLabelId = "".concat(prefix, "--modal-header__label--").concat(modalInstanceId);
|
|
61
|
-
var modalHeadingId = "".concat(prefix, "--modal-header__heading--").concat(modalInstanceId);
|
|
62
|
-
var modalBodyId = "".concat(prefix, "--modal-body--").concat(modalInstanceId);
|
|
63
|
-
var modalCloseButtonClass = "".concat(prefix, "--modal-close");
|
|
64
|
-
|
|
65
|
-
function isCloseButton(element) {
|
|
66
|
-
return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
function handleKeyDown(evt) {
|
|
70
|
-
if (open) {
|
|
71
|
-
if (evt.which === 27) {
|
|
72
|
-
onRequestClose(evt);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
if (evt.which === 13 && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
|
|
76
|
-
onRequestSubmit(evt);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function handleMousedown(evt) {
|
|
82
|
-
if (innerModal.current && !innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
|
|
83
|
-
onRequestClose(evt);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function handleBlur(_ref2) {
|
|
88
|
-
var oldActiveNode = _ref2.target,
|
|
89
|
-
currentActiveNode = _ref2.relatedTarget;
|
|
90
|
-
|
|
91
|
-
if (open && currentActiveNode && oldActiveNode) {
|
|
92
|
-
var bodyNode = innerModal.current;
|
|
93
|
-
var startTrapNode = startTrap.current;
|
|
94
|
-
var endTrapNode = endTrap.current;
|
|
95
|
-
wrapFocus({
|
|
96
|
-
bodyNode: bodyNode,
|
|
97
|
-
startTrapNode: startTrapNode,
|
|
98
|
-
endTrapNode: endTrapNode,
|
|
99
|
-
currentActiveNode: currentActiveNode,
|
|
100
|
-
oldActiveNode: oldActiveNode,
|
|
101
|
-
selectorsFloatingMenus: selectorsFloatingMenus
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
|
|
107
|
-
var modalClasses = cx("".concat(prefix, "--modal"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _defineProperty(_classNames, className, className), _classNames));
|
|
108
|
-
var containerClasses = cx("".concat(prefix, "--modal-container"), _defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
|
|
109
|
-
var contentClasses = cx("".concat(prefix, "--modal-content"), _defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
|
|
110
|
-
var footerClasses = cx("".concat(prefix, "--modal-footer"), _defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
|
|
111
|
-
var modalButton = /*#__PURE__*/React__default.createElement("button", {
|
|
112
|
-
className: modalCloseButtonClass,
|
|
113
|
-
type: "button",
|
|
114
|
-
onClick: onRequestClose,
|
|
115
|
-
title: ariaLabel,
|
|
116
|
-
"aria-label": closeButtonLabel ? closeButtonLabel : 'close',
|
|
117
|
-
ref: button
|
|
118
|
-
}, /*#__PURE__*/React__default.createElement(Close, {
|
|
119
|
-
size: 20,
|
|
120
|
-
"aria-hidden": "true",
|
|
121
|
-
tabIndex: "-1",
|
|
122
|
-
className: "".concat(modalCloseButtonClass, "__icon")
|
|
123
|
-
}));
|
|
124
|
-
var ariaLabel = modalLabel || ['aria-label'] || modalAriaLabel || modalHeading;
|
|
125
|
-
var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
|
|
126
|
-
var hasScrollingContentProps = hasScrollingContent ? {
|
|
127
|
-
tabIndex: 0,
|
|
128
|
-
role: 'region',
|
|
129
|
-
'aria-label': ariaLabel,
|
|
130
|
-
'aria-labelledby': getAriaLabelledBy
|
|
131
|
-
} : {};
|
|
132
|
-
var alertDialogProps = {};
|
|
133
|
-
|
|
134
|
-
if (alert && passiveModal) {
|
|
135
|
-
alertDialogProps.role = 'alert';
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
if (alert && !passiveModal) {
|
|
139
|
-
alertDialogProps.role = 'alertdialog';
|
|
140
|
-
alertDialogProps['aria-describedby'] = modalBodyId;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
useEffect(function () {
|
|
144
|
-
return function () {
|
|
145
|
-
toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), false);
|
|
146
|
-
};
|
|
147
|
-
}, [prefix]);
|
|
148
|
-
useEffect(function () {
|
|
149
|
-
toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), open);
|
|
150
|
-
}, [open, prefix]);
|
|
151
|
-
useEffect(function () {
|
|
152
|
-
var initialFocus = function initialFocus(focusContainerElement) {
|
|
153
|
-
var containerElement = focusContainerElement || innerModal.current;
|
|
154
|
-
var primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
|
|
155
|
-
|
|
156
|
-
if (primaryFocusElement) {
|
|
157
|
-
return primaryFocusElement;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
return button && button.current;
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
var focusButton = function focusButton(focusContainerElement) {
|
|
164
|
-
var target = initialFocus(focusContainerElement);
|
|
165
|
-
|
|
166
|
-
if (target) {
|
|
167
|
-
target.focus();
|
|
168
|
-
}
|
|
169
|
-
};
|
|
170
|
-
|
|
171
|
-
if (open) {
|
|
172
|
-
focusButton(innerModal.current);
|
|
173
|
-
}
|
|
174
|
-
}, [open, selectorPrimaryFocus]);
|
|
175
|
-
var modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
|
|
176
|
-
ref: innerModal,
|
|
177
|
-
role: "dialog"
|
|
178
|
-
}, alertDialogProps, {
|
|
179
|
-
className: containerClasses,
|
|
180
|
-
"aria-label": ariaLabel,
|
|
181
|
-
"aria-modal": "true",
|
|
182
|
-
tabIndex: "-1"
|
|
183
|
-
}), /*#__PURE__*/React__default.createElement("div", {
|
|
184
|
-
className: "".concat(prefix, "--modal-header")
|
|
185
|
-
}, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement("h2", {
|
|
186
|
-
id: modalLabelId,
|
|
187
|
-
className: "".concat(prefix, "--modal-header__label")
|
|
188
|
-
}, modalLabel), /*#__PURE__*/React__default.createElement("h3", {
|
|
189
|
-
id: modalHeadingId,
|
|
190
|
-
className: "".concat(prefix, "--modal-header__heading")
|
|
191
|
-
}, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
|
|
192
|
-
id: modalBodyId,
|
|
193
|
-
className: contentClasses
|
|
194
|
-
}, hasScrollingContentProps, {
|
|
195
|
-
"aria-labelledby": getAriaLabelledBy
|
|
196
|
-
}), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
|
|
197
|
-
className: "".concat(prefix, "--modal-content--overflow-indicator")
|
|
198
|
-
}), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
|
|
199
|
-
className: footerClasses
|
|
200
|
-
}, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(function (_ref3, i) {
|
|
201
|
-
var buttonText = _ref3.buttonText,
|
|
202
|
-
onButtonClick = _ref3.onClick;
|
|
203
|
-
return /*#__PURE__*/React__default.createElement(Button, {
|
|
204
|
-
key: "".concat(buttonText, "-").concat(i),
|
|
205
|
-
kind: "secondary",
|
|
206
|
-
onClick: onButtonClick
|
|
207
|
-
}, buttonText);
|
|
208
|
-
}) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
|
|
209
|
-
kind: "secondary",
|
|
210
|
-
onClick: onSecondaryButtonClick,
|
|
211
|
-
ref: secondaryButton
|
|
212
|
-
}, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
|
|
213
|
-
kind: danger ? 'danger' : 'primary',
|
|
214
|
-
disabled: primaryButtonDisabled,
|
|
215
|
-
onClick: onRequestSubmit,
|
|
216
|
-
ref: button
|
|
217
|
-
}, primaryButtonText)));
|
|
218
|
-
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
|
219
|
-
onKeyDown: handleKeyDown,
|
|
220
|
-
onMouseDown: handleMousedown,
|
|
221
|
-
onBlur: handleBlur,
|
|
222
|
-
className: modalClasses,
|
|
223
|
-
role: "presentation",
|
|
224
|
-
ref: ref
|
|
225
|
-
}), /*#__PURE__*/React__default.createElement("span", {
|
|
226
|
-
ref: startTrap,
|
|
227
|
-
tabIndex: "0",
|
|
228
|
-
role: "link",
|
|
229
|
-
className: "".concat(prefix, "--visually-hidden")
|
|
230
|
-
}, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
|
|
231
|
-
ref: endTrap,
|
|
232
|
-
tabIndex: "0",
|
|
233
|
-
role: "link",
|
|
234
|
-
className: "".concat(prefix, "--visually-hidden")
|
|
235
|
-
}, "Focus sentinel"));
|
|
236
|
-
});
|
|
237
|
-
Modal.propTypes = (_Modal$propTypes = {
|
|
238
|
-
/**
|
|
239
|
-
* Specify whether the Modal is displaying an alert, error or warning
|
|
240
|
-
* Should go hand in hand with the danger prop.
|
|
241
|
-
*/
|
|
242
|
-
alert: PropTypes.bool
|
|
243
|
-
}, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes.bool), _defineProperty(_Modal$propTypes, "id", PropTypes.string), _defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "modalHeading", PropTypes.node), _defineProperty(_Modal$propTypes, "modalLabel", PropTypes.node), _defineProperty(_Modal$propTypes, "onKeyDown", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestClose", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "open", PropTypes.bool), _defineProperty(_Modal$propTypes, "passiveModal", PropTypes.bool), _defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
|
|
244
|
-
if (props.secondaryButtons) {
|
|
245
|
-
if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
|
|
246
|
-
return new Error("".concat(propName, " needs to be an array of two button config objects"));
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
var shape = {
|
|
250
|
-
buttonText: PropTypes.node,
|
|
251
|
-
onClick: PropTypes.func
|
|
252
|
-
};
|
|
253
|
-
props[propName].forEach(function (secondaryButton) {
|
|
254
|
-
PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
|
|
255
|
-
});
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
return null;
|
|
259
|
-
}), _defineProperty(_Modal$propTypes, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_Modal$propTypes, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_Modal$propTypes, "shouldSubmitOnEnter", PropTypes.bool), _defineProperty(_Modal$propTypes, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _Modal$propTypes);
|
|
260
|
-
Modal.defaultProps = {
|
|
261
|
-
onRequestClose: function onRequestClose() {},
|
|
262
|
-
onRequestSubmit: function onRequestSubmit() {},
|
|
263
|
-
primaryButtonDisabled: false,
|
|
264
|
-
onKeyDown: function onKeyDown() {},
|
|
265
|
-
passiveModal: false,
|
|
266
|
-
modalHeading: '',
|
|
267
|
-
modalLabel: '',
|
|
268
|
-
preventCloseOnClickOutside: false,
|
|
269
|
-
selectorPrimaryFocus: '[data-modal-primary-focus]',
|
|
270
|
-
hasScrollingContent: false
|
|
271
|
-
};
|
|
272
|
-
var ModalNext = Modal;
|
|
273
|
-
|
|
274
|
-
export { ModalNext as default };
|