@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.
- package/es/components/ComposedModal/ComposedModal.js +2 -1
- package/es/components/ComposedModal/next/ComposedModal.js +2 -1
- package/es/components/DataTable/TableActionList.js +3 -1
- package/es/components/DataTable/TableToolbarContent.js +3 -1
- package/es/components/DataTable/TableToolbarSearch.js +10 -2
- package/es/components/DatePicker/DatePicker.js +14 -5
- package/es/components/FileUploader/FileUploader.js +1 -1
- package/es/components/FileUploader/FileUploaderButton.js +1 -1
- package/es/components/FileUploader/Filename.js +1 -1
- package/es/components/Layer/index.js +13 -1
- package/es/components/Link/Link.js +6 -3
- package/es/components/ListBox/ListBoxPropTypes.js +1 -2
- package/es/components/ListBox/ListBoxSelection.js +3 -4
- package/es/components/OverflowMenu/OverflowMenu.js +0 -1
- package/es/components/RadioButton/next/RadioButton.js +2 -1
- package/es/components/Search/next/Search.js +1 -0
- package/es/components/Tabs/next/Tabs.js +42 -4
- package/es/components/Toggle/Toggle.js +147 -109
- package/es/components/UIShell/HeaderGlobalBar.js +3 -1
- package/es/components/UIShell/HeaderMenu.js +1 -1
- package/es/components/UIShell/HeaderMenuButton.js +3 -4
- package/es/components/UIShell/HeaderName.js +3 -4
- package/es/components/UIShell/HeaderNavigation.js +27 -75
- package/es/components/UIShell/SideNav.js +3 -3
- package/es/components/UIShell/SideNavFooter.js +3 -10
- package/es/components/UIShell/SideNavIcon.js +3 -4
- package/es/components/UIShell/SideNavItem.js +4 -5
- package/es/components/UIShell/SideNavLink.js +0 -6
- package/es/components/UIShell/SideNavLinkText.js +3 -4
- package/es/components/UIShell/SideNavMenu.js +93 -131
- package/es/components/UIShell/SideNavSwitcher.js +4 -2
- package/es/components/UIShell/SkipToContent.js +3 -4
- package/es/index.js +13 -11
- package/es/tools/wrapComponent.js +6 -4
- package/lib/components/ComposedModal/ComposedModal.js +2 -1
- package/lib/components/ComposedModal/next/ComposedModal.js +2 -1
- package/lib/components/DataTable/TableActionList.js +3 -1
- package/lib/components/DataTable/TableToolbarContent.js +3 -1
- package/lib/components/DataTable/TableToolbarSearch.js +10 -2
- package/lib/components/DatePicker/DatePicker.js +14 -5
- package/lib/components/FileUploader/FileUploader.js +1 -1
- package/lib/components/FileUploader/FileUploaderButton.js +1 -1
- package/lib/components/FileUploader/Filename.js +1 -1
- package/lib/components/Layer/index.js +13 -0
- package/lib/components/Link/Link.js +6 -3
- package/lib/components/ListBox/ListBoxPropTypes.js +1 -21
- package/lib/components/ListBox/ListBoxSelection.js +3 -4
- package/lib/components/OverflowMenu/OverflowMenu.js +0 -1
- package/lib/components/RadioButton/next/RadioButton.js +2 -1
- package/lib/components/Search/next/Search.js +1 -0
- package/lib/components/Tabs/next/Tabs.js +42 -4
- package/lib/components/Toggle/Toggle.js +146 -107
- package/lib/components/UIShell/HeaderGlobalBar.js +3 -1
- package/lib/components/UIShell/HeaderMenu.js +1 -1
- package/lib/components/UIShell/HeaderMenuButton.js +3 -4
- package/lib/components/UIShell/HeaderName.js +3 -4
- package/lib/components/UIShell/HeaderNavigation.js +25 -73
- package/lib/components/UIShell/SideNav.js +3 -3
- package/lib/components/UIShell/SideNavFooter.js +3 -10
- package/lib/components/UIShell/SideNavIcon.js +3 -4
- package/lib/components/UIShell/SideNavItem.js +4 -5
- package/lib/components/UIShell/SideNavLink.js +0 -6
- package/lib/components/UIShell/SideNavLinkText.js +3 -4
- package/lib/components/UIShell/SideNavMenu.js +89 -128
- package/lib/components/UIShell/SideNavSwitcher.js +4 -2
- package/lib/components/UIShell/SkipToContent.js +3 -4
- package/lib/index.js +86 -82
- package/lib/tools/wrapComponent.js +6 -4
- package/package.json +18 -18
- package/es/components/Toggle/index.js +0 -19
- package/es/components/Toggle/next/Toggle.js +0 -158
- package/es/components/UIShell/index.js +0 -17
- package/es/components/UIShell/next/HeaderNavigation.js +0 -52
- package/es/components/UIShell/next/SideNavMenu.js +0 -160
- package/lib/components/Toggle/index.js +0 -23
- package/lib/components/Toggle/next/Toggle.js +0 -169
- package/lib/components/UIShell/index.js +0 -42
- package/lib/components/UIShell/next/HeaderNavigation.js +0 -62
- 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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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 {
|
|
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 {
|
|
13
|
+
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
14
|
|
|
15
15
|
var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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 `
|
|
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
|
|
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
|
-
|
|
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
|
|
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 {
|
|
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 {
|
|
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 (
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
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
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
large: false
|
|
170
|
-
});
|
|
139
|
+
if (child.props.isActive === true) {
|
|
140
|
+
return true;
|
|
141
|
+
}
|
|
171
142
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
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
|
-
|
|
188
|
-
|
|
151
|
+
if (children.props) {
|
|
152
|
+
if (children.props.isActive === true || children.props['aria-current']) {
|
|
153
|
+
return true;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
189
156
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
buttonRef: ref
|
|
193
|
-
}));
|
|
194
|
-
});
|
|
195
|
-
SideNavMenuForwardRef.displayName = 'SideNavMenu';
|
|
196
|
-
var SideNavMenuClassic = SideNavMenuForwardRef;
|
|
157
|
+
return false;
|
|
158
|
+
}
|
|
197
159
|
|
|
198
|
-
export { SideNavMenu
|
|
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:
|
|
28
|
+
htmlFor: id,
|
|
27
29
|
className: "".concat(prefix, "--assistive-text")
|
|
28
30
|
}, labelText), /*#__PURE__*/React__default.createElement("select", {
|
|
29
|
-
id:
|
|
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
|
-
|
|
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
|
|
56
|
+
export { SkipToContent as default };
|