@carbon/react 1.6.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 (39) hide show
  1. package/es/components/DataTable/TableToolbarSearch.js +10 -2
  2. package/es/components/Layer/index.js +13 -1
  3. package/es/components/OverflowMenu/OverflowMenu.js +0 -1
  4. package/es/components/UIShell/HeaderMenu.js +1 -1
  5. package/es/components/UIShell/HeaderMenuButton.js +3 -4
  6. package/es/components/UIShell/HeaderName.js +3 -4
  7. package/es/components/UIShell/HeaderNavigation.js +27 -75
  8. package/es/components/UIShell/SideNavFooter.js +3 -10
  9. package/es/components/UIShell/SideNavIcon.js +3 -4
  10. package/es/components/UIShell/SideNavItem.js +4 -5
  11. package/es/components/UIShell/SideNavLink.js +0 -6
  12. package/es/components/UIShell/SideNavLinkText.js +3 -4
  13. package/es/components/UIShell/SideNavMenu.js +93 -131
  14. package/es/components/UIShell/SideNavSwitcher.js +4 -2
  15. package/es/components/UIShell/SkipToContent.js +3 -4
  16. package/es/index.js +10 -9
  17. package/lib/components/DataTable/TableToolbarSearch.js +10 -2
  18. package/lib/components/Layer/index.js +13 -0
  19. package/lib/components/OverflowMenu/OverflowMenu.js +0 -1
  20. package/lib/components/UIShell/HeaderMenu.js +1 -1
  21. package/lib/components/UIShell/HeaderMenuButton.js +3 -4
  22. package/lib/components/UIShell/HeaderName.js +3 -4
  23. package/lib/components/UIShell/HeaderNavigation.js +25 -73
  24. package/lib/components/UIShell/SideNavFooter.js +3 -10
  25. package/lib/components/UIShell/SideNavIcon.js +3 -4
  26. package/lib/components/UIShell/SideNavItem.js +4 -5
  27. package/lib/components/UIShell/SideNavLink.js +0 -6
  28. package/lib/components/UIShell/SideNavLinkText.js +3 -4
  29. package/lib/components/UIShell/SideNavMenu.js +89 -128
  30. package/lib/components/UIShell/SideNavSwitcher.js +4 -2
  31. package/lib/components/UIShell/SkipToContent.js +3 -4
  32. package/lib/index.js +42 -40
  33. package/package.json +3 -3
  34. package/es/components/UIShell/index.js +0 -17
  35. package/es/components/UIShell/next/HeaderNavigation.js +0 -52
  36. package/es/components/UIShell/next/SideNavMenu.js +0 -160
  37. package/lib/components/UIShell/index.js +0 -42
  38. package/lib/components/UIShell/next/HeaderNavigation.js +0 -62
  39. package/lib/components/UIShell/next/SideNavMenu.js +0 -170
@@ -13,7 +13,7 @@ import Search from '../Search/index.js';
13
13
  import setupGetInstanceId from './tools/instanceId.js';
14
14
  import { usePrefix } from '../../internal/usePrefix.js';
15
15
 
16
- var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "placeholder", "labelText", "expanded", "defaultExpanded", "defaultValue", "disabled", "onExpand", "persistent", "id", "onBlur", "onFocus"];
16
+ var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "placeholder", "labelText", "expanded", "defaultExpanded", "defaultValue", "disabled", "onExpand", "persistent", "id", "onBlur", "onFocus", "size"];
17
17
  var getInstanceId = setupGetInstanceId();
18
18
  var translationKeys = {
19
19
  'carbon.table.toolbar.search.label': 'Filter table',
@@ -43,6 +43,8 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
43
43
  id = _ref.id,
44
44
  onBlur = _ref.onBlur,
45
45
  onFocus = _ref.onFocus,
46
+ _ref$size = _ref.size,
47
+ size = _ref$size === void 0 ? 'lg' : _ref$size,
46
48
  rest = _objectWithoutProperties(_ref, _excluded);
47
49
 
48
50
  var _useRef = useRef(expandedProp !== undefined),
@@ -126,7 +128,8 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
126
128
  } : handleOnFocus,
127
129
  onBlur: onBlur ? function (event) {
128
130
  return onBlur(event, handleExpand);
129
- } : handleOnBlur
131
+ } : handleOnBlur,
132
+ size: size
130
133
  }, rest));
131
134
  };
132
135
 
@@ -212,6 +215,11 @@ TableToolbarSearch.propTypes = {
212
215
  */
213
216
  searchContainerClass: PropTypes.string,
214
217
 
218
+ /**
219
+ * Specify the size of the Search
220
+ */
221
+ size: PropTypes.oneOf(['sm', 'md', 'lg']),
222
+
215
223
  /**
216
224
  * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
217
225
  */
@@ -15,6 +15,18 @@ import { LayerContext } from './LayerContext.js';
15
15
  var _excluded = ["as", "className", "children", "level"];
16
16
  var levels = ['one', 'two', 'three'];
17
17
  var MAX_LEVEL = levels.length - 1;
18
+ /**
19
+ * A custom hook that will return information about the current layer. A common
20
+ * field to pull from this is the `level` for the layer that the component that
21
+ * calls this hook is currently in
22
+ */
23
+
24
+ function useLayer() {
25
+ var level = React__default.useContext(LayerContext);
26
+ return {
27
+ level: level
28
+ };
29
+ }
18
30
  function Layer(_ref) {
19
31
  var _ref$as = _ref.as,
20
32
  BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
@@ -59,4 +71,4 @@ Layer.propTypes = {
59
71
  level: PropTypes.oneOf([0, 1, 2])
60
72
  };
61
73
 
62
- export { Layer };
74
+ export { Layer, useLayer };
@@ -509,7 +509,6 @@ _defineProperty(OverflowMenu, "defaultProps", {
509
509
  onOpen: function onOpen() {},
510
510
  menuOffset: getMenuOffset,
511
511
  menuOffsetFlip: getMenuOffset,
512
- light: false,
513
512
  selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
514
513
  });
515
514
 
@@ -163,7 +163,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
163
163
  'aria-label': ariaLabel,
164
164
  'aria-labelledby': ariaLabelledBy
165
165
  };
166
- var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _defineProperty(_cx, customClassName, true), _defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _cx)); // Notes on eslint comments and based on the examples in:
166
+ var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _defineProperty(_cx, "".concat(prefix, "--header__submenu--current"), isCurrentPage), _defineProperty(_cx, customClassName, !!customClassName), _cx)); // Notes on eslint comments and based on the examples in:
167
167
  // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
168
168
  // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
169
169
  // users
@@ -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 };
@@ -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 };