@carbon/react 1.5.0 → 1.7.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.
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/TableToolbarSearch.js +10 -2
  4. package/es/components/DatePicker/DatePicker.js +14 -5
  5. package/es/components/FileUploader/FileUploader.js +1 -1
  6. package/es/components/FileUploader/FileUploaderButton.js +1 -1
  7. package/es/components/FileUploader/Filename.js +1 -1
  8. package/es/components/Form/Form.js +1 -1
  9. package/es/components/FormGroup/FormGroup.js +4 -4
  10. package/es/components/FormItem/FormItem.js +5 -6
  11. package/es/components/Layer/index.js +13 -1
  12. package/es/components/Link/Link.js +6 -3
  13. package/es/components/ListBox/ListBoxPropTypes.js +1 -2
  14. package/es/components/ListBox/ListBoxSelection.js +3 -4
  15. package/es/components/OverflowMenu/OverflowMenu.js +0 -1
  16. package/es/components/Popover/index.js +137 -8
  17. package/es/components/RadioButton/next/RadioButton.js +2 -1
  18. package/es/components/Select/Select.js +14 -7
  19. package/es/components/Tabs/next/Tabs.js +42 -4
  20. package/es/components/Toggle/Toggle.js +147 -109
  21. package/es/components/UIShell/HeaderMenu.js +1 -1
  22. package/es/components/UIShell/HeaderMenuButton.js +3 -4
  23. package/es/components/UIShell/HeaderName.js +3 -4
  24. package/es/components/UIShell/HeaderNavigation.js +27 -75
  25. package/es/components/UIShell/SideNav.js +3 -3
  26. package/es/components/UIShell/SideNavFooter.js +3 -10
  27. package/es/components/UIShell/SideNavIcon.js +3 -4
  28. package/es/components/UIShell/SideNavItem.js +4 -5
  29. package/es/components/UIShell/SideNavLink.js +0 -6
  30. package/es/components/UIShell/SideNavLinkText.js +3 -4
  31. package/es/components/UIShell/SideNavMenu.js +93 -131
  32. package/es/components/UIShell/SideNavSwitcher.js +4 -2
  33. package/es/components/UIShell/SkipToContent.js +3 -4
  34. package/es/index.js +13 -11
  35. package/lib/components/ComposedModal/ComposedModal.js +2 -1
  36. package/lib/components/ComposedModal/next/ComposedModal.js +2 -1
  37. package/lib/components/DataTable/TableToolbarSearch.js +10 -2
  38. package/lib/components/DatePicker/DatePicker.js +14 -5
  39. package/lib/components/FileUploader/FileUploader.js +1 -1
  40. package/lib/components/FileUploader/FileUploaderButton.js +1 -1
  41. package/lib/components/FileUploader/Filename.js +1 -1
  42. package/lib/components/Form/Form.js +1 -1
  43. package/lib/components/FormGroup/FormGroup.js +4 -4
  44. package/lib/components/FormItem/FormItem.js +5 -6
  45. package/lib/components/Layer/index.js +13 -0
  46. package/lib/components/Link/Link.js +6 -3
  47. package/lib/components/ListBox/ListBoxPropTypes.js +1 -21
  48. package/lib/components/ListBox/ListBoxSelection.js +3 -4
  49. package/lib/components/OverflowMenu/OverflowMenu.js +0 -1
  50. package/lib/components/Popover/index.js +135 -6
  51. package/lib/components/RadioButton/next/RadioButton.js +2 -1
  52. package/lib/components/Select/Select.js +14 -7
  53. package/lib/components/Tabs/next/Tabs.js +42 -4
  54. package/lib/components/Toggle/Toggle.js +146 -107
  55. package/lib/components/UIShell/HeaderMenu.js +1 -1
  56. package/lib/components/UIShell/HeaderMenuButton.js +3 -4
  57. package/lib/components/UIShell/HeaderName.js +3 -4
  58. package/lib/components/UIShell/HeaderNavigation.js +25 -73
  59. package/lib/components/UIShell/SideNav.js +3 -3
  60. package/lib/components/UIShell/SideNavFooter.js +3 -10
  61. package/lib/components/UIShell/SideNavIcon.js +3 -4
  62. package/lib/components/UIShell/SideNavItem.js +4 -5
  63. package/lib/components/UIShell/SideNavLink.js +0 -6
  64. package/lib/components/UIShell/SideNavLinkText.js +3 -4
  65. package/lib/components/UIShell/SideNavMenu.js +89 -128
  66. package/lib/components/UIShell/SideNavSwitcher.js +4 -2
  67. package/lib/components/UIShell/SkipToContent.js +3 -4
  68. package/lib/index.js +86 -82
  69. package/package.json +3 -3
  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
@@ -1,160 +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 { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
9
- import { ChevronDown } from '@carbon/icons-react';
10
- import cx from 'classnames';
11
- import PropTypes from 'prop-types';
12
- import React__default, { useState } from 'react';
13
- import SideNavIcon from '../SideNavIcon.js';
14
- import { usePrefix } from '../../../internal/usePrefix.js';
15
- import { match } from '../../../internal/keyboard/match.js';
16
- import { Escape } from '../../../internal/keyboard/keys.js';
17
-
18
- var _ChevronDown;
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);
53
- }
54
-
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
- }
64
- }
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 = {
86
- /**
87
- * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
88
- */
89
- children: PropTypes.node,
90
-
91
- /**
92
- * Provide an optional class to be applied to the containing node
93
- */
94
- className: PropTypes.string,
95
-
96
- /**
97
- * Specify whether the menu should default to expanded. By default, it will
98
- * be closed.
99
- */
100
- defaultExpanded: PropTypes.bool,
101
-
102
- /**
103
- * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
104
- * considered active if one of its menu items are a link for the current
105
- * page.
106
- */
107
- isActive: PropTypes.bool,
108
-
109
- /**
110
- * Property to indicate if the side nav container is open (or not). Use to
111
- * keep local state and styling in step with the SideNav expansion state.
112
- */
113
- isSideNavExpanded: PropTypes.bool,
114
-
115
- /**
116
- * Specify if this is a large variation of the SideNavMenu
117
- */
118
- large: PropTypes.bool,
119
-
120
- /**
121
- * Pass in a custom icon to render next to the `SideNavMenu` title
122
- */
123
- renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
124
-
125
- /**
126
- * Provide the text for the overall menu name
127
- */
128
- title: PropTypes.string.isRequired
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
- }
138
-
139
- if (child.props.isActive === true) {
140
- return true;
141
- }
142
-
143
- if (child.props['aria-current']) {
144
- return true;
145
- }
146
-
147
- return false;
148
- });
149
- }
150
-
151
- if (children.props) {
152
- if (children.props.isActive === true || children.props['aria-current']) {
153
- return true;
154
- }
155
- }
156
-
157
- return false;
158
- }
159
-
160
- export { SideNavMenu };
@@ -1,23 +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
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var Toggle$2 = require('./next/Toggle.js');
13
- var Toggle$3 = require('./Toggle.js');
14
- var ComponentToggle = require('../../internal/ComponentToggle.js');
15
-
16
- var Toggle = ComponentToggle.createComponentToggle({
17
- name: 'Toggle',
18
- next: Toggle$2.Toggle,
19
- classic: Toggle$3["default"]
20
- });
21
- var Toggle$1 = Toggle;
22
-
23
- exports["default"] = Toggle$1;
@@ -1,169 +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
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
13
- var React = require('react');
14
- var PropTypes = require('prop-types');
15
- var cx = require('classnames');
16
- var useControllableState = require('../../../internal/useControllableState.js');
17
- var usePrefix = require('../../../internal/usePrefix.js');
18
-
19
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
-
21
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
23
- var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
24
-
25
- var _path;
26
-
27
- var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "size", "toggled"];
28
- function Toggle(_ref) {
29
- var className = _ref.className,
30
- _ref$defaultToggled = _ref.defaultToggled,
31
- defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
32
- _ref$disabled = _ref.disabled,
33
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
34
- _ref$hideLabel = _ref.hideLabel,
35
- hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
36
- id = _ref.id,
37
- _ref$labelA = _ref.labelA,
38
- labelA = _ref$labelA === void 0 ? 'Off' : _ref$labelA,
39
- _ref$labelB = _ref.labelB,
40
- labelB = _ref$labelB === void 0 ? 'On' : _ref$labelB,
41
- labelText = _ref.labelText,
42
- onClick = _ref.onClick,
43
- onToggle = _ref.onToggle,
44
- _ref$size = _ref.size,
45
- size = _ref$size === void 0 ? 'md' : _ref$size,
46
- toggled = _ref.toggled,
47
- other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
48
-
49
- var prefix = usePrefix.usePrefix();
50
-
51
- var _useControllableState = useControllableState.useControllableState({
52
- value: toggled,
53
- onChange: onToggle,
54
- defaultValue: defaultToggled
55
- }),
56
- _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
57
- checked = _useControllableState2[0],
58
- setChecked = _useControllableState2[1];
59
-
60
- function handleClick(e) {
61
- setChecked(!checked);
62
-
63
- if (onClick) {
64
- onClick(e);
65
- }
66
- }
67
-
68
- var isSm = size === 'sm';
69
- var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
70
- var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
71
- var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
72
- var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
73
- var switchClasses = cx__default["default"]("".concat(prefix, "--toggle__switch"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
74
- return /*#__PURE__*/React__default["default"].createElement("div", {
75
- className: wrapperClasses
76
- }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
77
- id: id,
78
- className: "".concat(prefix, "--toggle__button"),
79
- role: "switch",
80
- type: "button",
81
- "aria-checked": checked,
82
- disabled: disabled,
83
- onClick: handleClick
84
- })), /*#__PURE__*/React__default["default"].createElement("label", {
85
- htmlFor: id,
86
- className: "".concat(prefix, "--toggle__label")
87
- }, /*#__PURE__*/React__default["default"].createElement("span", {
88
- className: labelTextClasses
89
- }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
90
- className: appearanceClasses
91
- }, /*#__PURE__*/React__default["default"].createElement("div", {
92
- className: switchClasses
93
- }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
94
- className: "".concat(prefix, "--toggle__check"),
95
- width: "6px",
96
- height: "5px",
97
- viewBox: "0 0 6 5"
98
- }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
99
- d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
100
- })))), /*#__PURE__*/React__default["default"].createElement("span", {
101
- className: "".concat(prefix, "--toggle__text"),
102
- "aria-hidden": "true"
103
- }, sideLabel))));
104
- }
105
- Toggle.propTypes = {
106
- /**
107
- * Specify a custom className to apply to the form-item node
108
- */
109
- className: PropTypes__default["default"].string,
110
-
111
- /**
112
- * Specify whether the toggle should be on by default
113
- */
114
- defaultToggled: PropTypes__default["default"].bool,
115
-
116
- /**
117
- * Whether this control should be disabled
118
- */
119
- disabled: PropTypes__default["default"].bool,
120
-
121
- /**
122
- * Specify whether the label should be hidden, or not
123
- */
124
- hideLabel: PropTypes__default["default"].bool,
125
-
126
- /**
127
- * Provide an id that unique represents the underlying `<button>`
128
- */
129
- id: PropTypes__default["default"].string.isRequired,
130
-
131
- /**
132
- * Specify the label for the "off" position
133
- */
134
- labelA: PropTypes__default["default"].node,
135
-
136
- /**
137
- * Specify the label for the "on" position
138
- */
139
- labelB: PropTypes__default["default"].node,
140
-
141
- /**
142
- * Provide the text that will be read by a screen reader when visiting this
143
- * control
144
- */
145
- labelText: PropTypes__default["default"].node.isRequired,
146
-
147
- /**
148
- * Provide an event listener that is called when the control is clicked
149
- */
150
- onClick: PropTypes__default["default"].func,
151
-
152
- /**
153
- * Provide an event listener that is called when the control is toggled
154
- */
155
- onToggle: PropTypes__default["default"].func,
156
-
157
- /**
158
- * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
159
- */
160
- size: PropTypes__default["default"].oneOf(['sm', 'md']),
161
-
162
- /**
163
- * Specify whether the control is toggled
164
- */
165
- toggled: PropTypes__default["default"].bool
166
- };
167
-
168
- exports.Toggle = Toggle;
169
- exports["default"] = Toggle;
@@ -1,42 +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
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var FeatureFlags = require('@carbon/feature-flags');
13
- var HeaderNavigation$2 = require('./HeaderNavigation.js');
14
- var SideNavMenu$2 = require('./SideNavMenu.js');
15
- var SideNavMenu$1 = require('./next/SideNavMenu.js');
16
- var HeaderNavigation$1 = require('./next/HeaderNavigation.js');
17
-
18
- function _interopNamespace(e) {
19
- if (e && e.__esModule) return e;
20
- var n = Object.create(null);
21
- if (e) {
22
- Object.keys(e).forEach(function (k) {
23
- if (k !== 'default') {
24
- var d = Object.getOwnPropertyDescriptor(e, k);
25
- Object.defineProperty(n, k, d.get ? d : {
26
- enumerable: true,
27
- get: function () { return e[k]; }
28
- });
29
- }
30
- });
31
- }
32
- n["default"] = e;
33
- return Object.freeze(n);
34
- }
35
-
36
- var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
37
-
38
- var HeaderNavigation = FeatureFlags__namespace.enabled('enable-v11-release') ? HeaderNavigation$1.HeaderNavigation : HeaderNavigation$2["default"];
39
- var SideNavMenu = FeatureFlags__namespace.enabled('enable-v11-release') ? SideNavMenu$1.SideNavMenu : SideNavMenu$2["default"];
40
-
41
- exports.HeaderNavigation = HeaderNavigation;
42
- exports.SideNavMenu = SideNavMenu;
@@ -1,62 +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
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
13
- var cx = require('classnames');
14
- var React = require('react');
15
- var PropTypes = require('prop-types');
16
- var AriaPropTypes = require('../../../prop-types/AriaPropTypes.js');
17
- var usePrefix = require('../../../internal/usePrefix.js');
18
-
19
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
-
21
- var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
22
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
23
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
24
-
25
- var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
26
-
27
- function HeaderNavigation(props) {
28
- var ariaLabel = props['aria-label'],
29
- ariaLabelledBy = props['aria-labelledby'],
30
- children = props.children,
31
- customClassName = props.className,
32
- rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
33
-
34
- var prefix = usePrefix.usePrefix();
35
- var className = cx__default["default"]("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
36
- // so when we spread that should be the one that is applied to the node
37
-
38
- var accessibilityLabel = {
39
- 'aria-label': ariaLabel,
40
- 'aria-labelledby': ariaLabelledBy
41
- };
42
- return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
43
- className: className
44
- }), /*#__PURE__*/React__default["default"].createElement("ul", {
45
- className: "".concat(prefix, "--header__menu-bar")
46
- }, children));
47
- }
48
-
49
- HeaderNavigation.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
50
- /**
51
- * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
52
- * or `HeaderMenu`
53
- */
54
- children: PropTypes__default["default"].node,
55
-
56
- /**
57
- * Optionally provide a custom class to apply to the underlying <nav> node
58
- */
59
- className: PropTypes__default["default"].string
60
- });
61
-
62
- exports.HeaderNavigation = HeaderNavigation;
@@ -1,170 +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
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
13
- var iconsReact = require('@carbon/icons-react');
14
- var cx = require('classnames');
15
- var PropTypes = require('prop-types');
16
- var React = require('react');
17
- var SideNavIcon = require('../SideNavIcon.js');
18
- var usePrefix = require('../../../internal/usePrefix.js');
19
- var match = require('../../../internal/keyboard/match.js');
20
- var keys = require('../../../internal/keyboard/keys.js');
21
-
22
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
23
-
24
- var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
25
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
26
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
27
-
28
- var _ChevronDown;
29
- var SideNavMenu = /*#__PURE__*/React__default["default"].forwardRef(function SideNavMenu(props, ref) {
30
- var _cx;
31
-
32
- var customClassName = props.className,
33
- children = props.children,
34
- _props$defaultExpande = props.defaultExpanded,
35
- defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
36
- _props$isActive = props.isActive,
37
- isActive = _props$isActive === void 0 ? false : _props$isActive,
38
- _props$large = props.large,
39
- large = _props$large === void 0 ? false : _props$large,
40
- IconElement = props.renderIcon,
41
- isSideNavExpanded = props.isSideNavExpanded,
42
- title = props.title;
43
- var prefix = usePrefix.usePrefix();
44
-
45
- var _useState = React.useState(defaultExpanded),
46
- _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
47
- isExpanded = _useState2[0],
48
- setIsExpanded = _useState2[1];
49
-
50
- var _useState3 = React.useState(defaultExpanded),
51
- _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
52
- prevExpanded = _useState4[0],
53
- setPrevExpanded = _useState4[1];
54
-
55
- var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild(children) && !isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
56
-
57
- if (isSideNavExpanded === false && isExpanded === true) {
58
- setIsExpanded(false);
59
- setPrevExpanded(true);
60
- } else if (isSideNavExpanded === true && prevExpanded === true) {
61
- setIsExpanded(true);
62
- setPrevExpanded(false);
63
- }
64
-
65
- return (
66
- /*#__PURE__*/
67
- // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
68
- React__default["default"].createElement("li", {
69
- className: className,
70
- onKeyDown: function onKeyDown(event) {
71
- if (match.match(event, keys.Escape)) {
72
- setIsExpanded(false);
73
- }
74
- }
75
- }, /*#__PURE__*/React__default["default"].createElement("button", {
76
- "aria-expanded": isExpanded,
77
- className: "".concat(prefix, "--side-nav__submenu"),
78
- onClick: function onClick() {
79
- setIsExpanded(!isExpanded);
80
- },
81
- ref: ref,
82
- type: "button"
83
- }, IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("span", {
84
- className: "".concat(prefix, "--side-nav__submenu-title")
85
- }, title), /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
86
- className: "".concat(prefix, "--side-nav__submenu-chevron"),
87
- small: true
88
- }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
89
- size: 20
90
- })))), /*#__PURE__*/React__default["default"].createElement("ul", {
91
- className: "".concat(prefix, "--side-nav__menu")
92
- }, children))
93
- );
94
- });
95
- SideNavMenu.propTypes = {
96
- /**
97
- * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
98
- */
99
- children: PropTypes__default["default"].node,
100
-
101
- /**
102
- * Provide an optional class to be applied to the containing node
103
- */
104
- className: PropTypes__default["default"].string,
105
-
106
- /**
107
- * Specify whether the menu should default to expanded. By default, it will
108
- * be closed.
109
- */
110
- defaultExpanded: PropTypes__default["default"].bool,
111
-
112
- /**
113
- * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
114
- * considered active if one of its menu items are a link for the current
115
- * page.
116
- */
117
- isActive: PropTypes__default["default"].bool,
118
-
119
- /**
120
- * Property to indicate if the side nav container is open (or not). Use to
121
- * keep local state and styling in step with the SideNav expansion state.
122
- */
123
- isSideNavExpanded: PropTypes__default["default"].bool,
124
-
125
- /**
126
- * Specify if this is a large variation of the SideNavMenu
127
- */
128
- large: PropTypes__default["default"].bool,
129
-
130
- /**
131
- * Pass in a custom icon to render next to the `SideNavMenu` title
132
- */
133
- renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
134
-
135
- /**
136
- * Provide the text for the overall menu name
137
- */
138
- title: PropTypes__default["default"].string.isRequired
139
- };
140
-
141
- function hasActiveChild(children) {
142
- // if we have children, either a single or multiple, find if it is active
143
- if (Array.isArray(children)) {
144
- return children.some(function (child) {
145
- if (!child.props) {
146
- return false;
147
- }
148
-
149
- if (child.props.isActive === true) {
150
- return true;
151
- }
152
-
153
- if (child.props['aria-current']) {
154
- return true;
155
- }
156
-
157
- return false;
158
- });
159
- }
160
-
161
- if (children.props) {
162
- if (children.props.isActive === true || children.props['aria-current']) {
163
- return true;
164
- }
165
- }
166
-
167
- return false;
168
- }
169
-
170
- exports.SideNavMenu = SideNavMenu;