@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.
@@ -9,13 +9,13 @@
9
9
 
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
- var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
12
+ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
13
  var React = require('react');
14
14
  var PropTypes = require('prop-types');
15
- var Button = require('../../Button/Button.js');
16
- var ButtonSet = require('../../ButtonSet/ButtonSet.js');
15
+ var Button = require('../Button/Button.js');
16
+ var ButtonSet = require('../ButtonSet/ButtonSet.js');
17
17
  var cx = require('classnames');
18
- var usePrefix = require('../../../internal/usePrefix.js');
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('../../../_virtual/_rollupPluginBabelHelpers.js');
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('../../../internal/usePrefix.js');
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 = ["style", "className"];
24
+ var _excluded = ["className"];
25
25
 
26
26
  var IconSkeleton = function IconSkeleton(_ref) {
27
- var style = _ref.style,
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
 
@@ -53,7 +53,6 @@ var InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function
53
53
 
54
54
  if (indeterminate) {
55
55
  inputProps.checked = false;
56
- inputProps['aria-checked'] = 'mixed';
57
56
  }
58
57
 
59
58
  React.useEffect(function () {
@@ -326,9 +326,9 @@ NumberInput.propTypes = {
326
326
  min: PropTypes__default["default"].number,
327
327
 
328
328
  /**
329
- * The new value is available in 'imaginaryTarget.value'
330
- * i.e. to get the value: evt.imaginaryTarget.value
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.prefix, "--label")
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$e = require('./components/DataTable/index.js');
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$f = require('./components/ProgressIndicator/index.js');
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$g = require('./components/StructuredList/index.js');
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$h = require('./components/Tile/index.js');
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$i = require('./components/Toggletip/index.js');
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$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');
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$n = require('./components/OverflowMenuV2/index.js');
108
- var index$o = require('./components/Popover/index.js');
109
- var index$p = require('./components/Stack/index.js');
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$q = require('./components/Theme/index.js');
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$e["default"];
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$f.ProgressIndicator;
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$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;
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$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;
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$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;
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$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;
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$q.GlobalTheme;
324
- exports.Theme = index$q.Theme;
325
- exports.useTheme = index$q.useTheme;
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-verse.
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.9.0",
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.9.0",
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.6.0",
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": "182eaa898977e15b0cbedf4b8b62502693d43b4c"
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 };