@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/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$d = require('./components/ClassPrefix/index.js');
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$e = require('./components/ComposedModal/index.js');
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$f = require('./components/DataTable/index.js');
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 index$2 = require('./components/Modal/index.js');
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$3 = require('./components/OverflowMenu/index.js');
53
- var index$4 = require('./components/OverflowMenuItem/index.js');
54
- var index$5 = require('./components/Pagination/index.js');
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$g = require('./components/ProgressIndicator/index.js');
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$6 = require('./components/Search/index.js');
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$7 = require('./components/Slider/index.js');
71
- var index$h = require('./components/StructuredList/index.js');
72
- var index$8 = require('./components/Tab/index.js');
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$9 = require('./components/Tabs/index.js');
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$i = require('./components/Tile/index.js');
78
+ var index$h = require('./components/Tile/index.js');
81
79
  var RadioTile = require('./components/RadioTile/RadioTile.js');
82
- var index$a = require('./components/TileGroup/index.js');
83
- var index$b = require('./components/TimePicker/index.js');
84
- var index$c = require('./components/TimePickerSelect/index.js');
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$j = require('./components/Toggletip/index.js');
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$k = require('./components/FeatureFlags/index.js');
105
- var index$l = require('./components/Heading/index.js');
106
- var index$m = require('./components/IconButton/index.js');
107
- var index$n = require('./components/Layer/index.js');
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$o = require('./components/OverflowMenuV2/index.js');
110
- var index$p = require('./components/Popover/index.js');
111
- var index$q = require('./components/Stack/index.js');
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$r = require('./components/Theme/index.js');
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$d.ClassPrefix;
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$e.ComposedModal;
219
- exports.ModalFooter = index$e.ModalFooter;
220
- exports.ModalHeader = index$e.ModalHeader;
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$f["default"];
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 = index$2["default"];
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$3["default"];
247
- exports.OverflowMenuItem = index$4["default"];
248
- exports.Pagination = index$5["default"];
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$g.ProgressIndicator;
249
+ exports.ProgressIndicator = index$f.ProgressIndicator;
252
250
  exports.RadioButton = RadioButton["default"];
253
251
  exports.RadioButtonGroup = RadioButtonGroup["default"];
254
- exports.Search = index$6["default"];
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$7["default"];
265
- exports.StructuredListBody = index$h.StructuredListBody;
266
- exports.StructuredListCell = index$h.StructuredListCell;
267
- exports.StructuredListHead = index$h.StructuredListHead;
268
- exports.StructuredListInput = index$h.StructuredListInput;
269
- exports.StructuredListRow = index$h.StructuredListRow;
270
- exports.StructuredListWrapper = index$h.StructuredListWrapper;
271
- exports.Tab = index$8["default"];
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$9["default"];
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$i.ClickableTile;
279
- exports.ExpandableTile = index$i.ExpandableTile;
280
- exports.SelectableTile = index$i.SelectableTile;
281
- exports.Tile = index$i.Tile;
282
- exports.TileAboveTheFoldContent = index$i.TileAboveTheFoldContent;
283
- exports.TileBelowTheFoldContent = index$i.TileBelowTheFoldContent;
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$a["default"];
286
- exports.TimePicker = index$b["default"];
287
- exports.TimePickerSelect = index$c["default"];
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$j.Toggletip;
291
- exports.ToggletipActions = index$j.ToggletipActions;
292
- exports.ToggletipButton = index$j.ToggletipButton;
293
- exports.ToggletipContent = index$j.ToggletipContent;
294
- exports.ToggletipLabel = index$j.ToggletipLabel;
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$k.FeatureFlags;
312
- exports.unstable_useFeatureFlag = index$k.useFeatureFlag;
313
- exports.unstable_useFeatureFlags = index$k.useFeatureFlags;
314
- exports.Heading = index$l.Heading;
315
- exports.Section = index$l.Section;
316
- exports.IconButton = index$m.IconButton;
317
- exports.Layer = index$n.Layer;
318
- exports.useLayer = index$n.useLayer;
319
- exports.unstable_OverflowMenuV2 = index$o.OverflowMenuV2;
320
- exports.Popover = index$p.Popover;
321
- exports.PopoverContent = index$p.PopoverContent;
322
- exports.HStack = index$q.HStack;
323
- exports.VStack = index$q.VStack;
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$r.GlobalTheme;
326
- exports.Theme = index$r.Theme;
327
- exports.useTheme = index$r.useTheme;
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.8.0-rc.0",
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.6.0-rc.0",
48
- "@carbon/layout": "^11.4.0-rc.0",
49
- "@carbon/styles": "^1.8.0-rc.0",
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.5.0-rc.0",
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": "24655f8eaf108c43ac036e71360d4d3dc09a3bf4"
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 };