@carbon/react 1.5.0-rc.0 → 1.6.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.
Files changed (79) hide show
  1. package/es/components/ComposedModal/ComposedModal.js +2 -1
  2. package/es/components/ComposedModal/next/ComposedModal.js +2 -1
  3. package/es/components/DataTable/TableActionList.js +3 -1
  4. package/es/components/DataTable/TableToolbarContent.js +3 -1
  5. package/es/components/DataTable/TableToolbarSearch.js +10 -2
  6. package/es/components/DatePicker/DatePicker.js +14 -5
  7. package/es/components/FileUploader/FileUploader.js +1 -1
  8. package/es/components/FileUploader/FileUploaderButton.js +1 -1
  9. package/es/components/FileUploader/Filename.js +1 -1
  10. package/es/components/Layer/index.js +13 -1
  11. package/es/components/Link/Link.js +6 -3
  12. package/es/components/ListBox/ListBoxPropTypes.js +1 -2
  13. package/es/components/ListBox/ListBoxSelection.js +3 -4
  14. package/es/components/OverflowMenu/OverflowMenu.js +0 -1
  15. package/es/components/RadioButton/next/RadioButton.js +2 -1
  16. package/es/components/Search/next/Search.js +1 -0
  17. package/es/components/Tabs/next/Tabs.js +42 -4
  18. package/es/components/Toggle/Toggle.js +147 -109
  19. package/es/components/UIShell/HeaderGlobalBar.js +3 -1
  20. package/es/components/UIShell/HeaderMenu.js +1 -1
  21. package/es/components/UIShell/HeaderMenuButton.js +3 -4
  22. package/es/components/UIShell/HeaderName.js +3 -4
  23. package/es/components/UIShell/HeaderNavigation.js +27 -75
  24. package/es/components/UIShell/SideNav.js +3 -3
  25. package/es/components/UIShell/SideNavFooter.js +3 -10
  26. package/es/components/UIShell/SideNavIcon.js +3 -4
  27. package/es/components/UIShell/SideNavItem.js +4 -5
  28. package/es/components/UIShell/SideNavLink.js +0 -6
  29. package/es/components/UIShell/SideNavLinkText.js +3 -4
  30. package/es/components/UIShell/SideNavMenu.js +93 -131
  31. package/es/components/UIShell/SideNavSwitcher.js +4 -2
  32. package/es/components/UIShell/SkipToContent.js +3 -4
  33. package/es/index.js +13 -11
  34. package/es/tools/wrapComponent.js +6 -4
  35. package/lib/components/ComposedModal/ComposedModal.js +2 -1
  36. package/lib/components/ComposedModal/next/ComposedModal.js +2 -1
  37. package/lib/components/DataTable/TableActionList.js +3 -1
  38. package/lib/components/DataTable/TableToolbarContent.js +3 -1
  39. package/lib/components/DataTable/TableToolbarSearch.js +10 -2
  40. package/lib/components/DatePicker/DatePicker.js +14 -5
  41. package/lib/components/FileUploader/FileUploader.js +1 -1
  42. package/lib/components/FileUploader/FileUploaderButton.js +1 -1
  43. package/lib/components/FileUploader/Filename.js +1 -1
  44. package/lib/components/Layer/index.js +13 -0
  45. package/lib/components/Link/Link.js +6 -3
  46. package/lib/components/ListBox/ListBoxPropTypes.js +1 -21
  47. package/lib/components/ListBox/ListBoxSelection.js +3 -4
  48. package/lib/components/OverflowMenu/OverflowMenu.js +0 -1
  49. package/lib/components/RadioButton/next/RadioButton.js +2 -1
  50. package/lib/components/Search/next/Search.js +1 -0
  51. package/lib/components/Tabs/next/Tabs.js +42 -4
  52. package/lib/components/Toggle/Toggle.js +146 -107
  53. package/lib/components/UIShell/HeaderGlobalBar.js +3 -1
  54. package/lib/components/UIShell/HeaderMenu.js +1 -1
  55. package/lib/components/UIShell/HeaderMenuButton.js +3 -4
  56. package/lib/components/UIShell/HeaderName.js +3 -4
  57. package/lib/components/UIShell/HeaderNavigation.js +25 -73
  58. package/lib/components/UIShell/SideNav.js +3 -3
  59. package/lib/components/UIShell/SideNavFooter.js +3 -10
  60. package/lib/components/UIShell/SideNavIcon.js +3 -4
  61. package/lib/components/UIShell/SideNavItem.js +4 -5
  62. package/lib/components/UIShell/SideNavLink.js +0 -6
  63. package/lib/components/UIShell/SideNavLinkText.js +3 -4
  64. package/lib/components/UIShell/SideNavMenu.js +89 -128
  65. package/lib/components/UIShell/SideNavSwitcher.js +4 -2
  66. package/lib/components/UIShell/SkipToContent.js +3 -4
  67. package/lib/index.js +86 -82
  68. package/lib/tools/wrapComponent.js +6 -4
  69. package/package.json +18 -18
  70. package/es/components/Toggle/index.js +0 -19
  71. package/es/components/Toggle/next/Toggle.js +0 -158
  72. package/es/components/UIShell/index.js +0 -17
  73. package/es/components/UIShell/next/HeaderNavigation.js +0 -52
  74. package/es/components/UIShell/next/SideNavMenu.js +0 -160
  75. package/lib/components/Toggle/index.js +0 -23
  76. package/lib/components/Toggle/next/Toggle.js +0 -169
  77. package/lib/components/UIShell/index.js +0 -42
  78. package/lib/components/UIShell/next/HeaderNavigation.js +0 -62
  79. package/lib/components/UIShell/next/SideNavMenu.js +0 -170
@@ -17,7 +17,7 @@ var _Menu, _Close;
17
17
 
18
18
  var _excluded = ["aria-label", "aria-labelledby", "className", "renderMenuIcon", "renderCloseIcon", "onClick", "isActive", "isCollapsible"];
19
19
 
20
- var HeaderMenuButton = function HeaderMenuButton(_ref) {
20
+ function HeaderMenuButton(_ref) {
21
21
  var _cx;
22
22
 
23
23
  var ariaLabel = _ref['aria-label'],
@@ -48,7 +48,7 @@ var HeaderMenuButton = function HeaderMenuButton(_ref) {
48
48
  type: "button",
49
49
  onClick: onClick
50
50
  }), isActive ? closeIcon : menuIcon);
51
- };
51
+ }
52
52
 
53
53
  HeaderMenuButton.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
54
54
  /**
@@ -64,6 +64,5 @@ HeaderMenuButton.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType
64
64
  */
65
65
  onClick: PropTypes.func
66
66
  });
67
- var HeaderMenuButton$1 = HeaderMenuButton;
68
67
 
69
- export { HeaderMenuButton$1 as default };
68
+ export { HeaderMenuButton as default };
@@ -14,7 +14,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
14
14
 
15
15
  var _excluded = ["children", "className", "prefix", "href"];
16
16
 
17
- var HeaderName = function HeaderName(_ref) {
17
+ function HeaderName(_ref) {
18
18
  var children = _ref.children,
19
19
  customClassName = _ref.className,
20
20
  prefix = _ref.prefix,
@@ -29,7 +29,7 @@ var HeaderName = function HeaderName(_ref) {
29
29
  }), prefix && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
30
30
  className: "".concat(selectorPrefix, "--header__name--prefix")
31
31
  }, prefix), "\xA0"), children);
32
- };
32
+ }
33
33
 
34
34
  HeaderName.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {}, {
35
35
  /**
@@ -57,6 +57,5 @@ HeaderName.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {}, {
57
57
  HeaderName.defaultProps = {
58
58
  prefix: 'IBM'
59
59
  };
60
- var HeaderName$1 = HeaderName;
61
60
 
62
- export { HeaderName$1 as default };
61
+ export { HeaderName as default };
@@ -5,84 +5,38 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
8
+ import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import cx from 'classnames';
10
10
  import React__default from 'react';
11
11
  import PropTypes from 'prop-types';
12
12
  import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
13
- import { PrefixContext } from '../../internal/usePrefix.js';
13
+ import { usePrefix } from '../../internal/usePrefix.js';
14
14
 
15
15
  var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
16
16
 
17
- var HeaderNavigation = /*#__PURE__*/function (_React$Component) {
18
- _inherits(HeaderNavigation, _React$Component);
19
-
20
- var _super = _createSuper(HeaderNavigation);
21
-
22
- function HeaderNavigation(props) {
23
- var _this;
24
-
25
- _classCallCheck(this, HeaderNavigation);
26
-
27
- _this = _super.call(this, props);
28
-
29
- _defineProperty(_assertThisInitialized(_this), "handleItemRef", function (index) {
30
- return function (node) {
31
- _this.items[index] = node;
32
- };
33
- });
34
-
35
- _defineProperty(_assertThisInitialized(_this), "_renderNavItem", function (child, index) {
36
- if ( /*#__PURE__*/React__default.isValidElement(child)) {
37
- return /*#__PURE__*/React__default.cloneElement(child, {
38
- ref: _this.handleItemRef(index)
39
- });
40
- }
41
- });
42
-
43
- _this.items = [];
44
- _this.state = {
45
- selectedIndex: 0
46
- };
47
- return _this;
48
- }
49
-
50
- _createClass(HeaderNavigation, [{
51
- key: "render",
52
- value: function render() {
53
- var prefix = this.context;
54
-
55
- var _this$props = this.props,
56
- ariaLabel = _this$props['aria-label'],
57
- ariaLabelledBy = _this$props['aria-labelledby'],
58
- children = _this$props.children,
59
- customClassName = _this$props.className,
60
- rest = _objectWithoutProperties(_this$props, _excluded);
61
-
62
- var className = cx("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
63
- // so when we spread that should be the one that is applied to the node
64
-
65
- var accessibilityLabel = {
66
- 'aria-label': ariaLabel,
67
- 'aria-labelledby': ariaLabelledBy
68
- };
69
- return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, accessibilityLabel, {
70
- className: className
71
- }), /*#__PURE__*/React__default.createElement("ul", _extends({}, accessibilityLabel, {
72
- className: "".concat(prefix, "--header__menu-bar")
73
- }), React__default.Children.map(children, this._renderNavItem)));
74
- }
75
- /**
76
- * Render an individual menuitem, adding a `ref` for each child inside of
77
- * `this.items` to properly manage focus.
78
- */
79
-
80
- }]);
81
-
82
- return HeaderNavigation;
83
- }(React__default.Component);
84
-
85
- _defineProperty(HeaderNavigation, "propTypes", _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
17
+ function HeaderNavigation(props) {
18
+ var ariaLabel = props['aria-label'],
19
+ ariaLabelledBy = props['aria-labelledby'],
20
+ children = props.children,
21
+ customClassName = props.className,
22
+ rest = _objectWithoutProperties(props, _excluded);
23
+
24
+ var prefix = usePrefix();
25
+ var className = cx("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
26
+ // so when we spread that should be the one that is applied to the node
27
+
28
+ var accessibilityLabel = {
29
+ 'aria-label': ariaLabel,
30
+ 'aria-labelledby': ariaLabelledBy
31
+ };
32
+ return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, accessibilityLabel, {
33
+ className: className
34
+ }), /*#__PURE__*/React__default.createElement("ul", {
35
+ className: "".concat(prefix, "--header__menu-bar")
36
+ }, children));
37
+ }
38
+
39
+ HeaderNavigation.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
86
40
  /**
87
41
  * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
88
42
  * or `HeaderMenu`
@@ -93,8 +47,6 @@ _defineProperty(HeaderNavigation, "propTypes", _objectSpread2(_objectSpread2({},
93
47
  * Optionally provide a custom class to apply to the underlying <nav> node
94
48
  */
95
49
  className: PropTypes.string
96
- }));
97
-
98
- _defineProperty(HeaderNavigation, "contextType", PrefixContext);
50
+ });
99
51
 
100
- export { HeaderNavigation as default };
52
+ export { HeaderNavigation };
@@ -212,15 +212,15 @@ SideNav.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
212
212
  * @param {object} event
213
213
  * @param {boolean} value
214
214
  */
215
- onToggle: PropTypes.func,
216
-
215
+ onToggle: PropTypes.func
217
216
  /**
218
217
  * Provide a custom function for translating all message ids within this
219
218
  * component. This function will take in two arguments: the mesasge Id and the
220
219
  * state of the component. From this, you should return a string representing
221
220
  * the label you want displayed or read by screen readers.
222
221
  */
223
- translateById: PropTypes.func
222
+ // translateById: PropTypes.func,
223
+
224
224
  });
225
225
  var SideNav$1 = SideNav;
226
226
 
@@ -18,7 +18,7 @@ var _Close, _ChevronRight;
18
18
  * user interaction to expand or collapse the side navigation.
19
19
  */
20
20
 
21
- var SideNavFooter = function SideNavFooter(_ref) {
21
+ function SideNavFooter(_ref) {
22
22
  var assistiveText = _ref.assistiveText,
23
23
  customClassName = _ref.className,
24
24
  expanded = _ref.expanded,
@@ -43,7 +43,7 @@ var SideNavFooter = function SideNavFooter(_ref) {
43
43
  }))), /*#__PURE__*/React__default.createElement("span", {
44
44
  className: "".concat(prefix, "--assistive-text")
45
45
  }, assistiveText)));
46
- };
46
+ }
47
47
 
48
48
  SideNavFooter.propTypes = {
49
49
  /**
@@ -58,12 +58,6 @@ SideNavFooter.propTypes = {
58
58
  */
59
59
  expanded: PropTypes.bool.isRequired,
60
60
 
61
- /**
62
- * Property to indicate if the side nav container is open (or not). Use to
63
- * keep local state and styling in step with the SideNav expansion state.
64
- */
65
- isSideNavExpanded: PropTypes.bool,
66
-
67
61
  /**
68
62
  * Provide a function that is called when the toggle button is interacted
69
63
  * with. Useful for controlling the expansion state of the side navigation.
@@ -73,6 +67,5 @@ SideNavFooter.propTypes = {
73
67
  SideNavFooter.defaultProps = {
74
68
  assistiveText: 'Toggle opening or closing the side navigation'
75
69
  };
76
- var SideNavFooter$1 = SideNavFooter;
77
70
 
78
- export { SideNavFooter$1 as default };
71
+ export { SideNavFooter as default };
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
11
11
  import React__default from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
- var SideNavIcon = function SideNavIcon(_ref) {
14
+ function SideNavIcon(_ref) {
15
15
  var _cx;
16
16
 
17
17
  var children = _ref.children,
@@ -22,7 +22,7 @@ var SideNavIcon = function SideNavIcon(_ref) {
22
22
  return /*#__PURE__*/React__default.createElement("div", {
23
23
  className: className
24
24
  }, children);
25
- };
25
+ }
26
26
 
27
27
  SideNavIcon.propTypes = {
28
28
  /**
@@ -44,6 +44,5 @@ SideNavIcon.propTypes = {
44
44
  SideNavIcon.defaultProps = {
45
45
  small: false
46
46
  };
47
- var SideNavIcon$1 = SideNavIcon;
48
47
 
49
- export { SideNavIcon$1 as default };
48
+ export { SideNavIcon as default };
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
11
11
  import React__default from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
- var SideNavItem = function SideNavItem(_ref) {
14
+ function SideNavItem(_ref) {
15
15
  var _cx;
16
16
 
17
17
  var customClassName = _ref.className,
@@ -23,11 +23,11 @@ var SideNavItem = function SideNavItem(_ref) {
23
23
  return /*#__PURE__*/React__default.createElement("li", {
24
24
  className: className
25
25
  }, children);
26
- };
26
+ }
27
27
 
28
28
  SideNavItem.propTypes = {
29
29
  /**
30
- * Provide a single icon as the child to `SideNavIcon` to render in the
30
+ * Provide a single icon as the child to `SideNavItem` to render in the
31
31
  * container
32
32
  */
33
33
  children: PropTypes.node.isRequired,
@@ -42,6 +42,5 @@ SideNavItem.propTypes = {
42
42
  */
43
43
  large: PropTypes.bool
44
44
  };
45
- var SideNavItem$1 = SideNavItem;
46
45
 
47
- export { SideNavItem$1 as default };
46
+ export { SideNavItem as default };
@@ -49,12 +49,6 @@ SideNavLink.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {}, {
49
49
  */
50
50
  className: PropTypes.string,
51
51
 
52
- /**
53
- * Property to indicate if the side nav container is open (or not). Use to
54
- * keep local state and styling in step with the SideNav expansion state.
55
- */
56
- isSideNavExpanded: PropTypes.bool,
57
-
58
52
  /**
59
53
  * Specify if this is a large variation of the SideNavLink
60
54
  */
@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
14
  var _excluded = ["className", "children"];
15
15
 
16
- var SideNavLinkText = function SideNavLinkText(_ref) {
16
+ function SideNavLinkText(_ref) {
17
17
  var customClassName = _ref.className,
18
18
  children = _ref.children,
19
19
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -23,7 +23,7 @@ var SideNavLinkText = function SideNavLinkText(_ref) {
23
23
  return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
24
24
  className: className
25
25
  }), children);
26
- };
26
+ }
27
27
 
28
28
  SideNavLinkText.propTypes = {
29
29
  /**
@@ -36,6 +36,5 @@ SideNavLinkText.propTypes = {
36
36
  */
37
37
  className: PropTypes.string
38
38
  };
39
- var SideNavLinkText$1 = SideNavLinkText;
40
39
 
41
- export { SideNavLinkText$1 as default };
40
+ export { SideNavLinkText as default };
@@ -5,119 +5,84 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
8
+ import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import { ChevronDown } from '@carbon/icons-react';
10
10
  import cx from 'classnames';
11
11
  import PropTypes from 'prop-types';
12
- import React__default from 'react';
12
+ import React__default, { useState } from 'react';
13
13
  import SideNavIcon from './SideNavIcon.js';
14
- import { PrefixContext } from '../../internal/usePrefix.js';
14
+ import { usePrefix } from '../../internal/usePrefix.js';
15
15
  import { match } from '../../internal/keyboard/match.js';
16
16
  import { Escape } from '../../internal/keyboard/keys.js';
17
17
 
18
18
  var _ChevronDown;
19
- var SideNavMenu = /*#__PURE__*/function (_React$Component) {
20
- _inherits(SideNavMenu, _React$Component);
21
-
22
- var _super = _createSuper(SideNavMenu);
23
-
24
- function SideNavMenu(props) {
25
- var _this;
26
-
27
- _classCallCheck(this, SideNavMenu);
28
-
29
- _this = _super.call(this, props);
30
-
31
- _defineProperty(_assertThisInitialized(_this), "handleToggleExpand", function () {
32
- _this.setState(function (state) {
33
- return {
34
- isExpanded: !state.isExpanded
35
- };
36
- });
37
- });
38
-
39
- _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
40
- if (match(event, Escape)) {
41
- _this.setState(function () {
42
- return {
43
- isExpanded: false
44
- };
45
- });
46
- }
47
- });
48
-
49
- _this.state = {
50
- isExpanded: props.defaultExpanded || false,
51
- wasPreviouslyExpanded: props.defaultExpanded || false
52
- };
53
- return _this;
19
+ var SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(props, ref) {
20
+ var _cx;
21
+
22
+ var customClassName = props.className,
23
+ children = props.children,
24
+ _props$defaultExpande = props.defaultExpanded,
25
+ defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
26
+ _props$isActive = props.isActive,
27
+ isActive = _props$isActive === void 0 ? false : _props$isActive,
28
+ _props$large = props.large,
29
+ large = _props$large === void 0 ? false : _props$large,
30
+ IconElement = props.renderIcon,
31
+ isSideNavExpanded = props.isSideNavExpanded,
32
+ title = props.title;
33
+ var prefix = usePrefix();
34
+
35
+ var _useState = useState(defaultExpanded),
36
+ _useState2 = _slicedToArray(_useState, 2),
37
+ isExpanded = _useState2[0],
38
+ setIsExpanded = _useState2[1];
39
+
40
+ var _useState3 = useState(defaultExpanded),
41
+ _useState4 = _slicedToArray(_useState3, 2),
42
+ prevExpanded = _useState4[0],
43
+ setPrevExpanded = _useState4[1];
44
+
45
+ var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild(children) && !isExpanded), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _defineProperty(_cx, customClassName, !!customClassName), _cx));
46
+
47
+ if (isSideNavExpanded === false && isExpanded === true) {
48
+ setIsExpanded(false);
49
+ setPrevExpanded(true);
50
+ } else if (isSideNavExpanded === true && prevExpanded === true) {
51
+ setIsExpanded(true);
52
+ setPrevExpanded(false);
54
53
  }
55
54
 
56
- _createClass(SideNavMenu, [{
57
- key: "render",
58
- value: function render() {
59
- var _cx;
60
-
61
- var prefix = this.context;
62
- var _this$props = this.props,
63
- buttonRef = _this$props.buttonRef,
64
- customClassName = _this$props.className,
65
- children = _this$props.children,
66
- IconElement = _this$props.renderIcon,
67
- isActive = _this$props.isActive,
68
- title = _this$props.title,
69
- large = _this$props.large;
70
- var isExpanded = this.state.isExpanded;
71
- var hasActiveChild;
72
-
73
- if (children) {
74
- // if we have children, either a single or multiple, find if it is active
75
- hasActiveChild = Array.isArray(children) ? children.some(function (child) {
76
- if (child.props && (child.props.isActive === true || child.props['aria-current'])) {
77
- return true;
78
- }
79
-
80
- return false;
81
- }) : children.props && (children.props.isActive === true || children.props['aria-current']);
55
+ return (
56
+ /*#__PURE__*/
57
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
58
+ React__default.createElement("li", {
59
+ className: className,
60
+ onKeyDown: function onKeyDown(event) {
61
+ if (match(event, Escape)) {
62
+ setIsExpanded(false);
63
+ }
82
64
  }
83
-
84
- var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild && !isExpanded), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _defineProperty(_cx, customClassName, !!customClassName), _cx));
85
- return (
86
- /*#__PURE__*/
87
- // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
88
- React__default.createElement("li", {
89
- className: className,
90
- onKeyDown: this.handleKeyDown
91
- }, /*#__PURE__*/React__default.createElement("button", {
92
- "aria-expanded": isExpanded,
93
- className: "".concat(prefix, "--side-nav__submenu"),
94
- onClick: this.handleToggleExpand,
95
- ref: buttonRef,
96
- type: "button"
97
- }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("span", {
98
- className: "".concat(prefix, "--side-nav__submenu-title")
99
- }, title), /*#__PURE__*/React__default.createElement(SideNavIcon, {
100
- className: "".concat(prefix, "--side-nav__submenu-chevron"),
101
- small: true
102
- }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, {
103
- size: 20
104
- })))), /*#__PURE__*/React__default.createElement("ul", {
105
- className: "".concat(prefix, "--side-nav__menu")
106
- }, children))
107
- );
108
- }
109
- }]);
110
-
111
- return SideNavMenu;
112
- }(React__default.Component);
113
-
114
- _defineProperty(SideNavMenu, "contextType", PrefixContext);
115
-
116
- _defineProperty(SideNavMenu, "propTypes", {
117
- buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
118
- current: PropTypes.any
119
- })]),
120
-
65
+ }, /*#__PURE__*/React__default.createElement("button", {
66
+ "aria-expanded": isExpanded,
67
+ className: "".concat(prefix, "--side-nav__submenu"),
68
+ onClick: function onClick() {
69
+ setIsExpanded(!isExpanded);
70
+ },
71
+ ref: ref,
72
+ type: "button"
73
+ }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("span", {
74
+ className: "".concat(prefix, "--side-nav__submenu-title")
75
+ }, title), /*#__PURE__*/React__default.createElement(SideNavIcon, {
76
+ className: "".concat(prefix, "--side-nav__submenu-chevron"),
77
+ small: true
78
+ }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, {
79
+ size: 20
80
+ })))), /*#__PURE__*/React__default.createElement("ul", {
81
+ className: "".concat(prefix, "--side-nav__menu")
82
+ }, children))
83
+ );
84
+ });
85
+ SideNavMenu.propTypes = {
121
86
  /**
122
87
  * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
123
88
  */
@@ -161,38 +126,35 @@ _defineProperty(SideNavMenu, "propTypes", {
161
126
  * Provide the text for the overall menu name
162
127
  */
163
128
  title: PropTypes.string.isRequired
164
- });
129
+ };
130
+
131
+ function hasActiveChild(children) {
132
+ // if we have children, either a single or multiple, find if it is active
133
+ if (Array.isArray(children)) {
134
+ return children.some(function (child) {
135
+ if (!child.props) {
136
+ return false;
137
+ }
165
138
 
166
- _defineProperty(SideNavMenu, "defaultProps", {
167
- defaultExpanded: false,
168
- isActive: false,
169
- large: false
170
- });
139
+ if (child.props.isActive === true) {
140
+ return true;
141
+ }
171
142
 
172
- _defineProperty(SideNavMenu, "getDerivedStateFromProps", function (props, state) {
173
- var derivedState = null;
174
-
175
- if (props.isSideNavExpanded === false && state.isExpanded === true) {
176
- derivedState = {
177
- isExpanded: props.isSideNavExpanded,
178
- wasPreviouslyExpanded: true
179
- };
180
- } else if (props.isSideNavExpanded === true && state.wasPreviouslyExpanded === true) {
181
- derivedState = {
182
- isExpanded: props.isSideNavExpanded,
183
- wasPreviouslyExpanded: false
184
- };
143
+ if (child.props['aria-current']) {
144
+ return true;
145
+ }
146
+
147
+ return false;
148
+ });
185
149
  }
186
150
 
187
- return derivedState;
188
- });
151
+ if (children.props) {
152
+ if (children.props.isActive === true || children.props['aria-current']) {
153
+ return true;
154
+ }
155
+ }
189
156
 
190
- var SideNavMenuForwardRef = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
191
- return /*#__PURE__*/React__default.createElement(SideNavMenu, _extends({}, props, {
192
- buttonRef: ref
193
- }));
194
- });
195
- SideNavMenuForwardRef.displayName = 'SideNavMenu';
196
- var SideNavMenuClassic = SideNavMenuForwardRef;
157
+ return false;
158
+ }
197
159
 
198
- export { SideNavMenu, SideNavMenuClassic as default };
160
+ export { SideNavMenu };
@@ -10,9 +10,11 @@ import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
11
  import React__default from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
+ import { useId } from '../../internal/useId.js';
13
14
 
14
15
  var _ChevronDown;
15
16
  var SideNavSwitcher = /*#__PURE__*/React__default.forwardRef(function SideNavSwitcher(props, ref) {
17
+ var id = useId('side-nav-switcher');
16
18
  var prefix = usePrefix();
17
19
  var customClassName = props.className,
18
20
  labelText = props.labelText,
@@ -23,10 +25,10 @@ var SideNavSwitcher = /*#__PURE__*/React__default.forwardRef(function SideNavSwi
23
25
  return /*#__PURE__*/React__default.createElement("div", {
24
26
  className: className
25
27
  }, /*#__PURE__*/React__default.createElement("label", {
26
- htmlFor: "side-nav-switcher",
28
+ htmlFor: id,
27
29
  className: "".concat(prefix, "--assistive-text")
28
30
  }, labelText), /*#__PURE__*/React__default.createElement("select", {
29
- id: "carbon-side-nav-switcher",
31
+ id: id,
30
32
  className: "".concat(prefix, "--side-nav__select"),
31
33
  defaultValue: "",
32
34
  onBlur: onChange,
@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
14
  var _excluded = ["children", "className", "href", "tabIndex"];
15
15
 
16
- var SkipToContent = function SkipToContent(_ref) {
16
+ function SkipToContent(_ref) {
17
17
  var children = _ref.children,
18
18
  customClassName = _ref.className,
19
19
  href = _ref.href,
@@ -27,7 +27,7 @@ var SkipToContent = function SkipToContent(_ref) {
27
27
  href: href,
28
28
  tabIndex: tabIndex
29
29
  }), children);
30
- };
30
+ }
31
31
 
32
32
  SkipToContent.propTypes = {
33
33
  /**
@@ -52,6 +52,5 @@ SkipToContent.defaultProps = {
52
52
  href: '#main-content',
53
53
  tabIndex: '0'
54
54
  };
55
- var SkipToContent$1 = SkipToContent;
56
55
 
57
- export { SkipToContent$1 as default };
56
+ export { SkipToContent as default };