@instructure/ui-top-nav-bar 8.33.1 → 8.33.2
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/CHANGELOG.md +4 -0
- package/es/TopNavBar/TopNavBarActionItems/TopNavBarActionItemsLocator.js +4 -2
- package/es/TopNavBar/TopNavBarActionItems/index.js +10 -35
- package/es/TopNavBar/TopNavBarActionItems/props.js +1 -0
- package/es/TopNavBar/TopNavBarActionItems/styles.js +0 -1
- package/es/TopNavBar/TopNavBarActionItems/theme.js +4 -4
- package/es/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.js +3 -5
- package/es/TopNavBar/TopNavBarBrand/index.js +6 -17
- package/es/TopNavBar/TopNavBarBrand/props.js +1 -0
- package/es/TopNavBar/TopNavBarBrand/styles.js +1 -2
- package/es/TopNavBar/TopNavBarBrand/theme.js +2 -2
- package/es/TopNavBar/TopNavBarContext.js +1 -1
- package/es/TopNavBar/TopNavBarItem/TopNavBarItemLocator.js +12 -15
- package/es/TopNavBar/TopNavBarItem/index.js +49 -136
- package/es/TopNavBar/TopNavBarItem/props.js +1 -0
- package/es/TopNavBar/TopNavBarItem/styles.js +5 -6
- package/es/TopNavBar/TopNavBarItem/theme.js +5 -5
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/TopNavBarDesktopLayoutLocator.js +3 -6
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/index.js +6 -20
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/props.js +5 -2
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js +3 -4
- package/es/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +6 -6
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/TopNavBarSmallViewportLayoutLocator.js +8 -16
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js +25 -83
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.js +5 -2
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/styles.js +4 -5
- package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +6 -6
- package/es/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js +3 -1
- package/es/TopNavBar/TopNavBarLayout/index.js +8 -19
- package/es/TopNavBar/TopNavBarLayout/props.js +3 -1
- package/es/TopNavBar/TopNavBarLayout/theme.js +6 -4
- package/es/TopNavBar/TopNavBarLocator.js +2 -1
- package/es/TopNavBar/TopNavBarMenuItems/TopNavBarMenuItemsLocator.js +4 -4
- package/es/TopNavBar/TopNavBarMenuItems/index.js +9 -35
- package/es/TopNavBar/TopNavBarMenuItems/props.js +1 -0
- package/es/TopNavBar/TopNavBarMenuItems/styles.js +0 -1
- package/es/TopNavBar/TopNavBarMenuItems/theme.js +3 -3
- package/es/TopNavBar/TopNavBarUser/TopNavBarUserLocator.js +3 -1
- package/es/TopNavBar/TopNavBarUser/index.js +2 -18
- package/es/TopNavBar/TopNavBarUser/props.js +1 -0
- package/es/TopNavBar/TopNavBarUser/styles.js +0 -1
- package/es/TopNavBar/index.js +4 -12
- package/es/TopNavBar/props.js +1 -0
- package/es/TopNavBar/utils/exampleHelpers.js +9 -17
- package/es/TopNavBar/utils/exampleSvgFiles.js +1 -4
- package/es/TopNavBar/utils/mapItemsForDrilldown.js +16 -25
- package/es/index.js +1 -0
- package/lib/TopNavBar/TopNavBarActionItems/TopNavBarActionItemsLocator.js +3 -6
- package/lib/TopNavBar/TopNavBarActionItems/index.js +10 -55
- package/lib/TopNavBar/TopNavBarActionItems/props.js +1 -6
- package/lib/TopNavBar/TopNavBarActionItems/styles.js +0 -2
- package/lib/TopNavBar/TopNavBarActionItems/theme.js +4 -5
- package/lib/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.js +1 -8
- package/lib/TopNavBar/TopNavBarBrand/index.js +6 -30
- package/lib/TopNavBar/TopNavBarBrand/props.js +1 -3
- package/lib/TopNavBar/TopNavBarBrand/styles.js +1 -3
- package/lib/TopNavBar/TopNavBarBrand/theme.js +2 -3
- package/lib/TopNavBar/TopNavBarContext.js +0 -2
- package/lib/TopNavBar/TopNavBarItem/TopNavBarItemLocator.js +5 -15
- package/lib/TopNavBar/TopNavBarItem/index.js +49 -162
- package/lib/TopNavBar/TopNavBarItem/props.js +1 -6
- package/lib/TopNavBar/TopNavBarItem/styles.js +5 -7
- package/lib/TopNavBar/TopNavBarItem/theme.js +5 -6
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/TopNavBarDesktopLayoutLocator.js +3 -15
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/index.js +6 -30
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/props.js +5 -4
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js +3 -5
- package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +6 -7
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/TopNavBarSmallViewportLayoutLocator.js +5 -21
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js +25 -111
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.js +5 -4
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/styles.js +4 -6
- package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +6 -7
- package/lib/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js +1 -5
- package/lib/TopNavBar/TopNavBarLayout/index.js +8 -30
- package/lib/TopNavBar/TopNavBarLayout/props.js +3 -11
- package/lib/TopNavBar/TopNavBarLayout/theme.js +4 -7
- package/lib/TopNavBar/TopNavBarLocator.js +1 -3
- package/lib/TopNavBar/TopNavBarMenuItems/TopNavBarMenuItemsLocator.js +1 -7
- package/lib/TopNavBar/TopNavBarMenuItems/index.js +9 -52
- package/lib/TopNavBar/TopNavBarMenuItems/props.js +1 -5
- package/lib/TopNavBar/TopNavBarMenuItems/styles.js +0 -2
- package/lib/TopNavBar/TopNavBarMenuItems/theme.js +3 -4
- package/lib/TopNavBar/TopNavBarUser/TopNavBarUserLocator.js +1 -3
- package/lib/TopNavBar/TopNavBarUser/index.js +2 -29
- package/lib/TopNavBar/TopNavBarUser/props.js +1 -5
- package/lib/TopNavBar/TopNavBarUser/styles.js +0 -2
- package/lib/TopNavBar/index.js +3 -27
- package/lib/TopNavBar/props.js +1 -3
- package/lib/TopNavBar/utils/exampleHelpers.js +9 -39
- package/lib/TopNavBar/utils/exampleSvgFiles.js +0 -6
- package/lib/TopNavBar/utils/mapItemsForDrilldown.js +16 -37
- package/lib/index.js +0 -1
- package/package.json +27 -27
- package/tsconfig.build.tsbuildinfo +1 -1
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["desktopConfig", "smallViewportConfig", "styles", "makeStyles"];
|
|
3
|
-
|
|
4
3
|
var _dec, _dec2, _class, _class2;
|
|
5
|
-
|
|
6
4
|
/*
|
|
7
5
|
* The MIT License (MIT)
|
|
8
6
|
*
|
|
@@ -36,7 +34,6 @@ import generateComponentTheme from './theme';
|
|
|
36
34
|
import { TopNavBarSmallViewportLayout } from './SmallViewportLayout';
|
|
37
35
|
import { TopNavBarDesktopLayout } from './DesktopLayout';
|
|
38
36
|
import { propTypes, allowedProps } from './props';
|
|
39
|
-
|
|
40
37
|
/**
|
|
41
38
|
---
|
|
42
39
|
parent: TopNavBar
|
|
@@ -49,19 +46,18 @@ let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
|
|
|
49
46
|
constructor() {
|
|
50
47
|
super(...arguments);
|
|
51
48
|
this.ref = null;
|
|
52
|
-
|
|
53
49
|
this.handleRef = el => {
|
|
54
50
|
const elementRef = this.props.elementRef;
|
|
55
51
|
this.ref = el;
|
|
56
|
-
|
|
57
52
|
if (typeof elementRef === 'function') {
|
|
58
53
|
elementRef(el);
|
|
59
54
|
}
|
|
60
55
|
};
|
|
61
56
|
}
|
|
62
|
-
|
|
63
57
|
get sortedThemeOverride() {
|
|
64
|
-
const themeOverride = this.props.themeOverride;
|
|
58
|
+
const themeOverride = this.props.themeOverride;
|
|
59
|
+
|
|
60
|
+
// TODO: try to type better, the themeOverride types are not prepared to be inherited and sorted
|
|
65
61
|
|
|
66
62
|
if (!themeOverride || typeof themeOverride === 'function') {
|
|
67
63
|
return {
|
|
@@ -69,10 +65,8 @@ let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
|
|
|
69
65
|
smallViewportThemeOverride: themeOverride
|
|
70
66
|
};
|
|
71
67
|
}
|
|
72
|
-
|
|
73
68
|
const desktopThemeOverride = {};
|
|
74
69
|
const smallViewportThemeOverride = {};
|
|
75
|
-
|
|
76
70
|
for (const key in themeOverride) {
|
|
77
71
|
if (key.startsWith('smallViewport')) {
|
|
78
72
|
const variable = key;
|
|
@@ -82,34 +76,29 @@ let TopNavBarLayout = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
|
|
|
82
76
|
desktopThemeOverride[variable] = themeOverride[variable];
|
|
83
77
|
}
|
|
84
78
|
}
|
|
85
|
-
|
|
86
79
|
return {
|
|
87
80
|
desktopThemeOverride,
|
|
88
81
|
smallViewportThemeOverride
|
|
89
82
|
};
|
|
90
83
|
}
|
|
91
|
-
|
|
92
84
|
render() {
|
|
93
85
|
const _this$props = this.props,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
86
|
+
desktopConfig = _this$props.desktopConfig,
|
|
87
|
+
smallViewportConfig = _this$props.smallViewportConfig,
|
|
88
|
+
styles = _this$props.styles,
|
|
89
|
+
makeStyles = _this$props.makeStyles,
|
|
90
|
+
restProps = _objectWithoutProperties(_this$props, _excluded);
|
|
100
91
|
if (this.context.layout === 'smallViewport') {
|
|
101
92
|
return jsx(TopNavBarSmallViewportLayout, Object.assign({}, smallViewportConfig, restProps, {
|
|
102
93
|
themeOverride: this.sortedThemeOverride.smallViewportThemeOverride,
|
|
103
94
|
elementRef: this.handleRef
|
|
104
95
|
}));
|
|
105
96
|
}
|
|
106
|
-
|
|
107
97
|
return jsx(TopNavBarDesktopLayout, Object.assign({}, desktopConfig, restProps, {
|
|
108
98
|
themeOverride: this.sortedThemeOverride.desktopThemeOverride,
|
|
109
99
|
elementRef: this.handleRef
|
|
110
100
|
}));
|
|
111
101
|
}
|
|
112
|
-
|
|
113
102
|
}, _class2.displayName = "TopNavBarLayout", _class2.componentId = 'TopNavBar.Layout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
114
103
|
desktopConfig: {},
|
|
115
104
|
smallViewportConfig: {}
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import PropTypes from 'prop-types';
|
|
25
26
|
import { Children as ChildrenPropTypes, element } from '@instructure/ui-prop-types';
|
|
26
27
|
import { TopNavBarActionItems } from '../TopNavBarActionItems';
|
|
@@ -58,7 +59,8 @@ const smallViewportPropTypes = {
|
|
|
58
59
|
onDropdownMenuToggle: PropTypes.func,
|
|
59
60
|
onDropdownMenuSelect: PropTypes.func
|
|
60
61
|
};
|
|
61
|
-
const propTypes = {
|
|
62
|
+
const propTypes = {
|
|
63
|
+
...commonPropTypes,
|
|
62
64
|
desktopConfig: PropTypes.shape(desktopPropTypes),
|
|
63
65
|
smallViewportConfig: PropTypes.shape(smallViewportPropTypes).isRequired
|
|
64
66
|
};
|
|
@@ -21,20 +21,22 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import desktopTheme from './DesktopLayout/theme';
|
|
25
26
|
import smallViewportTheme from './SmallViewportLayout/theme';
|
|
27
|
+
|
|
26
28
|
/**
|
|
27
29
|
* Generates the theme object for the component from the theme and provided additional information
|
|
28
30
|
* @param {Object} theme The actual theme object.
|
|
29
31
|
* @return {Object} The final theme object with the overrides and component variables
|
|
30
32
|
*/
|
|
31
|
-
|
|
32
33
|
const generateComponentTheme = theme => {
|
|
33
|
-
const componentVariables = {
|
|
34
|
+
const componentVariables = {
|
|
35
|
+
...desktopTheme(theme),
|
|
34
36
|
...smallViewportTheme(theme)
|
|
35
37
|
};
|
|
36
|
-
return {
|
|
38
|
+
return {
|
|
39
|
+
...componentVariables
|
|
37
40
|
};
|
|
38
41
|
};
|
|
39
|
-
|
|
40
42
|
export default generateComponentTheme;
|
|
@@ -22,8 +22,9 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
|
-
import { TopNavBar } from './index';
|
|
25
|
+
import { TopNavBar } from './index';
|
|
26
26
|
|
|
27
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
27
28
|
export const TopNavBarLocator = locator(TopNavBar.selector, {
|
|
28
29
|
/* custom component query methods go here */
|
|
29
30
|
});
|
|
@@ -21,16 +21,18 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import { locator } from '@instructure/ui-test-locator';
|
|
26
|
+
|
|
25
27
|
/* eslint-disable no-restricted-imports */
|
|
26
28
|
// @ts-expect-error bypass no type definition found error
|
|
27
|
-
|
|
28
29
|
import { TruncateListLocator } from '@instructure/ui-truncate-list/es/TruncateList/TruncateListLocator';
|
|
29
30
|
/* eslint-enable no-restricted-imports */
|
|
30
31
|
|
|
31
32
|
import { TopNavBarItemLocator } from '../TopNavBarItem/TopNavBarItemLocator';
|
|
32
|
-
import { TopNavBarMenuItems } from './index';
|
|
33
|
+
import { TopNavBarMenuItems } from './index';
|
|
33
34
|
|
|
35
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
34
36
|
export const TopNavBarMenuItemsLocator = locator(TopNavBarMenuItems.selector, {
|
|
35
37
|
findAllMenuItems: function () {
|
|
36
38
|
return TopNavBarItemLocator.findAll(...arguments);
|
|
@@ -42,9 +44,7 @@ export const TopNavBarMenuItemsLocator = locator(TopNavBarMenuItems.selector, {
|
|
|
42
44
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
43
45
|
args[_key] = arguments[_key];
|
|
44
46
|
}
|
|
45
|
-
|
|
46
47
|
const truncateList = await TruncateListLocator.find(...args);
|
|
47
|
-
|
|
48
48
|
if (truncateList) {
|
|
49
49
|
return TopNavBarItemLocator.find('[id^=TopNavBarMenuItems-hiddenMenuItemsMenuTrigger_]', ...args);
|
|
50
50
|
} else {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
var _dec, _dec2, _dec3, _class, _class2, _span;
|
|
2
|
-
|
|
3
2
|
/*
|
|
4
3
|
* The MIT License (MIT)
|
|
5
4
|
*
|
|
@@ -38,7 +37,6 @@ import { mapItemsForDrilldown, renderMappedItemDrilldownSubpages, renderMappedIt
|
|
|
38
37
|
import generateStyle from './styles';
|
|
39
38
|
import generateComponentTheme from './theme';
|
|
40
39
|
import { propTypes, allowedProps } from './props';
|
|
41
|
-
|
|
42
40
|
/**
|
|
43
41
|
---
|
|
44
42
|
parent: TopNavBar
|
|
@@ -53,23 +51,19 @@ let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(genera
|
|
|
53
51
|
this._hiddenMenuItemsMenuTriggerId = void 0;
|
|
54
52
|
this._hiddenItemsMenuId = void 0;
|
|
55
53
|
this.ref = null;
|
|
56
|
-
|
|
57
54
|
this.handleRef = el => {
|
|
58
55
|
const elementRef = this.props.elementRef;
|
|
59
56
|
this.ref = el;
|
|
60
|
-
|
|
61
57
|
if (typeof elementRef === 'function') {
|
|
62
58
|
elementRef(el);
|
|
63
59
|
}
|
|
64
60
|
};
|
|
65
|
-
|
|
66
61
|
this.renderOptionContent = (children, itemProps) => {
|
|
67
62
|
const styles = this.props.styles;
|
|
68
63
|
return jsx("span", {
|
|
69
64
|
css: (itemProps === null || itemProps === void 0 ? void 0 : itemProps.status) === 'active' ? styles === null || styles === void 0 ? void 0 : styles.submenuOptionActive : styles === null || styles === void 0 ? void 0 : styles.submenuOption
|
|
70
65
|
}, children);
|
|
71
66
|
};
|
|
72
|
-
|
|
73
67
|
this._hiddenMenuItemsMenuTriggerId = props.deterministicId('TopNavBarMenuItems-hiddenMenuItemsMenuTrigger');
|
|
74
68
|
this._hiddenItemsMenuId = props.deterministicId('TopNavBarSmallViewportLayout-drilldown');
|
|
75
69
|
this.state = {
|
|
@@ -77,38 +71,29 @@ let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(genera
|
|
|
77
71
|
visibleItemsCount: void 0
|
|
78
72
|
};
|
|
79
73
|
}
|
|
80
|
-
|
|
81
74
|
componentDidMount() {
|
|
82
75
|
var _this$props$makeStyle, _this$props;
|
|
83
|
-
|
|
84
76
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
85
77
|
}
|
|
86
|
-
|
|
87
78
|
componentDidUpdate(prevProps) {
|
|
88
79
|
var _this$props$makeStyle2, _this$props2;
|
|
89
|
-
|
|
90
80
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
91
|
-
|
|
92
81
|
if (React.Children.count(prevProps.children) !== this.childrenArray.length) {
|
|
93
82
|
this.setState({
|
|
94
83
|
key: this.state.key + 1
|
|
95
84
|
});
|
|
96
85
|
}
|
|
97
86
|
}
|
|
98
|
-
|
|
99
87
|
get childrenArray() {
|
|
100
88
|
return React.Children.toArray(this.props.children);
|
|
101
89
|
}
|
|
102
|
-
|
|
103
90
|
renderHiddenItemsMenu(hiddenItems) {
|
|
104
91
|
const _this$props3 = this.props,
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
92
|
+
renderHiddenItemsMenuTriggerLabel = _this$props3.renderHiddenItemsMenuTriggerLabel,
|
|
93
|
+
currentPageId = _this$props3.currentPageId;
|
|
108
94
|
if (!hiddenItems.length) {
|
|
109
95
|
return _span || (_span = jsx("span", null));
|
|
110
96
|
}
|
|
111
|
-
|
|
112
97
|
const mappedItems = mapItemsForDrilldown(hiddenItems, {
|
|
113
98
|
renderOptionContent: this.renderOptionContent,
|
|
114
99
|
currentPageId
|
|
@@ -127,27 +112,23 @@ let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(genera
|
|
|
127
112
|
}, options), ...subPages])
|
|
128
113
|
}, renderHiddenItemsMenuTriggerLabel(hiddenItems.length));
|
|
129
114
|
}
|
|
130
|
-
|
|
131
115
|
renderChildren() {
|
|
132
116
|
const currentPageId = this.props.currentPageId;
|
|
133
117
|
return this.childrenArray.map(child => {
|
|
134
118
|
if (!child) {
|
|
135
119
|
return;
|
|
136
120
|
}
|
|
137
|
-
|
|
138
121
|
const _child$props = child.props,
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
122
|
+
id = _child$props.id,
|
|
123
|
+
status = _child$props.status,
|
|
124
|
+
variant = _child$props.variant,
|
|
125
|
+
renderSubmenu = _child$props.renderSubmenu,
|
|
126
|
+
renderAvatar = _child$props.renderAvatar;
|
|
144
127
|
const isCurrentPage = currentPageId === id;
|
|
145
|
-
|
|
146
128
|
if (renderAvatar) {
|
|
147
129
|
error(false, `Items in <TopNavBar.MenuItems> are not allowed to have avatars, but item with id: "${id}" has \`renderAvatar\` prop.`);
|
|
148
130
|
return null;
|
|
149
131
|
}
|
|
150
|
-
|
|
151
132
|
if (!isCurrentPage) {
|
|
152
133
|
return child;
|
|
153
134
|
} else {
|
|
@@ -155,12 +136,10 @@ let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(genera
|
|
|
155
136
|
warn(false, `Only \`variant="default"\` items can be set to current/active, but the item with id "${id}" is "${variant}" variant.`);
|
|
156
137
|
return child;
|
|
157
138
|
}
|
|
158
|
-
|
|
159
139
|
if (status === 'disabled') {
|
|
160
140
|
warn(false, `Disabled items can not be set to current/active, but the item with id "${id}" is disabled.`);
|
|
161
141
|
return child;
|
|
162
142
|
}
|
|
163
|
-
|
|
164
143
|
return safeCloneElement(child, {
|
|
165
144
|
status: 'active',
|
|
166
145
|
// if it has submenu, the root item cannot be current,
|
|
@@ -170,21 +149,17 @@ let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(genera
|
|
|
170
149
|
}
|
|
171
150
|
});
|
|
172
151
|
}
|
|
173
|
-
|
|
174
152
|
render() {
|
|
175
153
|
const _this$props4 = this.props,
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
154
|
+
listLabel = _this$props4.listLabel,
|
|
155
|
+
styles = _this$props4.styles;
|
|
179
156
|
if (!this.childrenArray.length) {
|
|
180
157
|
return null;
|
|
181
158
|
}
|
|
182
|
-
|
|
183
159
|
if (this.context.layout === 'smallViewport') {
|
|
184
160
|
// in smallViewport mode it is rendered as a Drilldown
|
|
185
161
|
return null;
|
|
186
162
|
}
|
|
187
|
-
|
|
188
163
|
return jsx(TruncateList, Object.assign({}, omitProps(this.props, allowedProps), {
|
|
189
164
|
key: this.state.key // rerender if child count changes
|
|
190
165
|
,
|
|
@@ -204,7 +179,6 @@ let TopNavBarMenuItems = (_dec = withDeterministicId(), _dec2 = withStyle(genera
|
|
|
204
179
|
"aria-label": listLabel
|
|
205
180
|
}), this.renderChildren());
|
|
206
181
|
}
|
|
207
|
-
|
|
208
182
|
}, _class2.displayName = "TopNavBarMenuItems", _class2.componentId = 'TopNavBar.MenuItems', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class) || _class);
|
|
209
183
|
export { TopNavBarMenuItems };
|
|
210
184
|
export default TopNavBarMenuItems;
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import PropTypes from 'prop-types';
|
|
25
26
|
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
|
26
27
|
import { TopNavBarItem } from '../TopNavBarItem';
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
*/
|
|
30
30
|
const generateComponentTheme = theme => {
|
|
31
31
|
const borders = theme.borders,
|
|
32
|
-
|
|
32
|
+
typography = theme.typography;
|
|
33
33
|
const componentVariables = {
|
|
34
34
|
desktopItemSpacing: '1rem',
|
|
35
35
|
desktopMaxWidth: '100%',
|
|
@@ -38,8 +38,8 @@ const generateComponentTheme = theme => {
|
|
|
38
38
|
desktopSubmenuActiveOptionIndicatorWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
|
|
39
39
|
desktopSubmenuActiveOptionIndicatorColor: 'currentColor'
|
|
40
40
|
};
|
|
41
|
-
return {
|
|
41
|
+
return {
|
|
42
|
+
...componentVariables
|
|
42
43
|
};
|
|
43
44
|
};
|
|
44
|
-
|
|
45
45
|
export default generateComponentTheme;
|
|
@@ -21,9 +21,11 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
|
-
import { TopNavBarUser } from './index';
|
|
26
|
+
import { TopNavBarUser } from './index';
|
|
26
27
|
|
|
28
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
27
29
|
export const TopNavBarUserLocator = locator(TopNavBarUser.selector, {
|
|
28
30
|
/* custom component query methods go here */
|
|
29
31
|
});
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
var _dec, _dec2, _class, _class2;
|
|
2
|
-
|
|
3
2
|
/*
|
|
4
3
|
* The MIT License (MIT)
|
|
5
4
|
*
|
|
@@ -33,7 +32,6 @@ import { withStyle, jsx } from '@instructure/emotion';
|
|
|
33
32
|
import { TopNavBarContext } from '../TopNavBarContext';
|
|
34
33
|
import generateStyle from './styles';
|
|
35
34
|
import { propTypes, allowedProps } from './props';
|
|
36
|
-
|
|
37
35
|
/**
|
|
38
36
|
---
|
|
39
37
|
parent: TopNavBar
|
|
@@ -46,64 +44,50 @@ let TopNavBarUser = (_dec = withStyle(generateStyle, null), _dec2 = testable(),
|
|
|
46
44
|
constructor() {
|
|
47
45
|
super(...arguments);
|
|
48
46
|
this.ref = null;
|
|
49
|
-
|
|
50
47
|
this.handleRef = el => {
|
|
51
48
|
const elementRef = this.props.elementRef;
|
|
52
49
|
this.ref = el;
|
|
53
|
-
|
|
54
50
|
if (typeof elementRef === 'function') {
|
|
55
51
|
elementRef(el);
|
|
56
52
|
}
|
|
57
53
|
};
|
|
58
54
|
}
|
|
59
|
-
|
|
60
55
|
componentDidMount() {
|
|
61
56
|
var _this$props$makeStyle, _this$props;
|
|
62
|
-
|
|
63
57
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
64
58
|
}
|
|
65
|
-
|
|
66
59
|
componentDidUpdate() {
|
|
67
60
|
var _this$props$makeStyle2, _this$props2;
|
|
68
|
-
|
|
69
61
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
70
62
|
}
|
|
71
|
-
|
|
72
63
|
get content() {
|
|
73
64
|
const children = React.Children.toArray(this.props.children);
|
|
74
65
|
const allowedVariants = ['default', 'button', 'avatar'];
|
|
75
66
|
return Children.map(children, child => {
|
|
76
67
|
const _child$props = child.props,
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
68
|
+
id = _child$props.id,
|
|
69
|
+
variant = _child$props.variant;
|
|
80
70
|
if (variant && !allowedVariants.includes(variant)) {
|
|
81
71
|
error(false, `Item with id "${id}" has "${variant}" variant, but only the following variants are allowed in <TopNavBarUser>: ${allowedVariants.join(', ')}.`);
|
|
82
72
|
return null;
|
|
83
73
|
}
|
|
84
|
-
|
|
85
74
|
return child;
|
|
86
75
|
});
|
|
87
76
|
}
|
|
88
|
-
|
|
89
77
|
render() {
|
|
90
78
|
const styles = this.props.styles;
|
|
91
|
-
|
|
92
79
|
if (!this.content || this.content.length === 0) {
|
|
93
80
|
return null;
|
|
94
81
|
}
|
|
95
|
-
|
|
96
82
|
if (this.context.layout === 'smallViewport') {
|
|
97
83
|
// in smallViewport mode it is rendered as a Drilldown
|
|
98
84
|
return null;
|
|
99
85
|
}
|
|
100
|
-
|
|
101
86
|
return jsx("div", Object.assign({}, omitProps(this.props, allowedProps), {
|
|
102
87
|
ref: this.handleRef,
|
|
103
88
|
css: styles === null || styles === void 0 ? void 0 : styles.topNavBarUser
|
|
104
89
|
}), this.content);
|
|
105
90
|
}
|
|
106
|
-
|
|
107
91
|
}, _class2.displayName = "TopNavBarUser", _class2.componentId = 'TopNavBar.User', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {}, _class2.contextType = TopNavBarContext, _class2)) || _class) || _class);
|
|
108
92
|
export { TopNavBarUser };
|
|
109
93
|
export default TopNavBarUser;
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import PropTypes from 'prop-types';
|
|
25
26
|
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
|
26
27
|
import { TopNavBarItem } from '../TopNavBarItem';
|
package/es/TopNavBar/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
var _dec, _class, _class2;
|
|
2
|
-
|
|
3
2
|
/*
|
|
4
3
|
* The MIT License (MIT)
|
|
5
4
|
*
|
|
@@ -23,6 +22,7 @@ var _dec, _class, _class2;
|
|
|
23
22
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
24
23
|
* SOFTWARE.
|
|
25
24
|
*/
|
|
25
|
+
|
|
26
26
|
import React, { Component } from 'react';
|
|
27
27
|
import { error } from '@instructure/console';
|
|
28
28
|
import { testable } from '@instructure/ui-testable';
|
|
@@ -37,7 +37,6 @@ import { TopNavBarMenuItems } from './TopNavBarMenuItems';
|
|
|
37
37
|
import { TopNavBarUser } from './TopNavBarUser';
|
|
38
38
|
import { TopNavBarContext } from './TopNavBarContext';
|
|
39
39
|
import { propTypes, allowedProps } from './props';
|
|
40
|
-
|
|
41
40
|
/**
|
|
42
41
|
---
|
|
43
42
|
category: components
|
|
@@ -48,26 +47,22 @@ let TopNavBar = (_dec = testable(), _dec(_class = (_class2 = class TopNavBar ext
|
|
|
48
47
|
constructor() {
|
|
49
48
|
super(...arguments);
|
|
50
49
|
this.ref = null;
|
|
51
|
-
|
|
52
50
|
this.handleRef = el => {
|
|
53
51
|
const elementRef = this.props.elementRef;
|
|
54
52
|
this.ref = el;
|
|
55
|
-
|
|
56
53
|
if (typeof elementRef === 'function') {
|
|
57
54
|
elementRef(el);
|
|
58
55
|
}
|
|
59
56
|
};
|
|
60
57
|
}
|
|
61
|
-
|
|
62
58
|
get breakpoint() {
|
|
63
59
|
return px(this.props.breakpoint);
|
|
64
60
|
}
|
|
65
|
-
|
|
66
61
|
render() {
|
|
67
62
|
const _this$props = this.props,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
63
|
+
children = _this$props.children,
|
|
64
|
+
mediaQueryMatch = _this$props.mediaQueryMatch,
|
|
65
|
+
inverseColor = _this$props.inverseColor;
|
|
71
66
|
return /*#__PURE__*/React.createElement(Responsive, {
|
|
72
67
|
elementRef: this.handleRef,
|
|
73
68
|
match: mediaQueryMatch,
|
|
@@ -86,11 +81,9 @@ let TopNavBar = (_dec = testable(), _dec(_class = (_class2 = class TopNavBar ext
|
|
|
86
81
|
currentLayout: layout,
|
|
87
82
|
inverseColor: isInverseColor
|
|
88
83
|
});
|
|
89
|
-
|
|
90
84
|
if (!matchComponentTypes(content, [TopNavBarLayout])) {
|
|
91
85
|
error(false, 'The `children` function prop of TopNavBar has to return a child of type <TopNavBar.Layout>, but it returned:', content);
|
|
92
86
|
}
|
|
93
|
-
|
|
94
87
|
return /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
|
|
95
88
|
value: {
|
|
96
89
|
layout,
|
|
@@ -100,7 +93,6 @@ let TopNavBar = (_dec = testable(), _dec(_class = (_class2 = class TopNavBar ext
|
|
|
100
93
|
}
|
|
101
94
|
});
|
|
102
95
|
}
|
|
103
|
-
|
|
104
96
|
}, _class2.displayName = "TopNavBar", _class2.componentId = 'TopNavBar', _class2.ActionItems = TopNavBarActionItems, _class2.Brand = TopNavBarBrand, _class2.Item = TopNavBarItem, _class2.Layout = TopNavBarLayout, _class2.MenuItems = TopNavBarMenuItems, _class2.User = TopNavBarUser, _class2.contextType = TopNavBarContext, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
105
97
|
breakpoint: 1024,
|
|
106
98
|
mediaQueryMatch: 'media',
|
package/es/TopNavBar/props.js
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import React from 'react';
|
|
25
26
|
import { Drilldown } from '@instructure/ui-drilldown';
|
|
26
27
|
import { IconQuestionLine, IconAlertsLine, IconConfigureLine, IconSearchLine, IconDiscussionLine, IconDashboardLine } from '@instructure/ui-icons';
|
|
@@ -45,7 +46,6 @@ const itemSubmenuExample = /*#__PURE__*/React.createElement(Drilldown, {
|
|
|
45
46
|
id: "linkExampleOption3",
|
|
46
47
|
href: "/#Three"
|
|
47
48
|
}, "Link Three")));
|
|
48
|
-
|
|
49
49
|
const getCustomPopoverConfig = function (inverseColor) {
|
|
50
50
|
let extraProps = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
51
51
|
return {
|
|
@@ -56,14 +56,12 @@ const getCustomPopoverConfig = function (inverseColor) {
|
|
|
56
56
|
...extraProps
|
|
57
57
|
};
|
|
58
58
|
};
|
|
59
|
-
|
|
60
59
|
const getCustomPopoverContent = inverseColor => /*#__PURE__*/React.createElement("div", {
|
|
61
60
|
style: {
|
|
62
61
|
color: inverseColor ? 'black' : 'white',
|
|
63
62
|
padding: '0 0.5rem'
|
|
64
63
|
}
|
|
65
64
|
}, "dialog content");
|
|
66
|
-
|
|
67
65
|
const getInPlaceDialogConfig = function (inverseColor) {
|
|
68
66
|
let extraProps = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
69
67
|
return {
|
|
@@ -78,7 +76,6 @@ const getInPlaceDialogConfig = function (inverseColor) {
|
|
|
78
76
|
...extraProps
|
|
79
77
|
};
|
|
80
78
|
};
|
|
81
|
-
|
|
82
79
|
const SmallViewportModeWrapper = props => {
|
|
83
80
|
return /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
|
|
84
81
|
value: {
|
|
@@ -87,12 +84,10 @@ const SmallViewportModeWrapper = props => {
|
|
|
87
84
|
}
|
|
88
85
|
}, props.children);
|
|
89
86
|
};
|
|
90
|
-
|
|
91
87
|
SmallViewportModeWrapper.defaultProps = {
|
|
92
88
|
layout: 'smallViewport',
|
|
93
89
|
inverseColor: false
|
|
94
90
|
};
|
|
95
|
-
|
|
96
91
|
const getBrand = function () {
|
|
97
92
|
let config = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
98
93
|
const logo = config.inverseColor ? elevateLogoInverse : elevateLogo;
|
|
@@ -106,7 +101,6 @@ const getBrand = function () {
|
|
|
106
101
|
href: "/#TopNavBar"
|
|
107
102
|
}, config.brandProps));
|
|
108
103
|
};
|
|
109
|
-
|
|
110
104
|
const getMenuItems = function () {
|
|
111
105
|
let config = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
112
106
|
const items = config.menuItemsCustomIdList || ['Overview', 'Admin', 'Settings', 'Maps', 'Assessments', 'Community'];
|
|
@@ -126,10 +120,8 @@ const getMenuItems = function () {
|
|
|
126
120
|
}, itemProps), (itemProps === null || itemProps === void 0 ? void 0 : itemProps.children) || item);
|
|
127
121
|
}));
|
|
128
122
|
};
|
|
129
|
-
|
|
130
123
|
const getActionItems = function () {
|
|
131
124
|
var _config$actionItemsPr, _config$actionItemsPr2;
|
|
132
|
-
|
|
133
125
|
let config = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
134
126
|
const items = [{
|
|
135
127
|
label: 'Search',
|
|
@@ -167,10 +159,8 @@ const getActionItems = function () {
|
|
|
167
159
|
}, itemProps), (itemProps === null || itemProps === void 0 ? void 0 : itemProps.children) || item.label);
|
|
168
160
|
}));
|
|
169
161
|
};
|
|
170
|
-
|
|
171
162
|
const getUser = function () {
|
|
172
163
|
var _config$userProps, _config$userItemProps;
|
|
173
|
-
|
|
174
164
|
let config = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
175
165
|
return /*#__PURE__*/React.createElement(TopNavBar.User, config.userProps, config.userProps && 'children' in config.userProps ? (_config$userProps = config.userProps) === null || _config$userProps === void 0 ? void 0 : _config$userProps.children : /*#__PURE__*/React.createElement(TopNavBar.Item, Object.assign({
|
|
176
166
|
id: config.userId || 'User',
|
|
@@ -180,7 +170,6 @@ const getUser = function () {
|
|
|
180
170
|
renderSubmenu: config.userWithSubmenu ? itemSubmenuExample : void 0
|
|
181
171
|
}, config.userItemProps), ((_config$userItemProps = config.userItemProps) === null || _config$userItemProps === void 0 ? void 0 : _config$userItemProps.children) || (config.userVariant === 'button' ? 'Log In/Register' : 'User Name')));
|
|
182
172
|
};
|
|
183
|
-
|
|
184
173
|
const getLayoutProps = function (props) {
|
|
185
174
|
let config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
186
175
|
return {
|
|
@@ -193,19 +182,22 @@ const getLayoutProps = function (props) {
|
|
|
193
182
|
alternativeTitle: config.hasAlternativeTitle ? 'Page title' : void 0,
|
|
194
183
|
renderInPlaceDialogConfig: config.hasRenderInPlaceDialogConfig ? getInPlaceDialogConfig(props.inverseColor) : void 0
|
|
195
184
|
},
|
|
196
|
-
renderBrand: getBrand({
|
|
185
|
+
renderBrand: getBrand({
|
|
186
|
+
...props,
|
|
197
187
|
...config
|
|
198
188
|
}),
|
|
199
|
-
renderMenuItems: getMenuItems({
|
|
189
|
+
renderMenuItems: getMenuItems({
|
|
190
|
+
...props,
|
|
200
191
|
...config
|
|
201
192
|
}),
|
|
202
|
-
renderActionItems: getActionItems({
|
|
193
|
+
renderActionItems: getActionItems({
|
|
194
|
+
...props,
|
|
203
195
|
...config
|
|
204
196
|
}),
|
|
205
|
-
renderUser: getUser({
|
|
197
|
+
renderUser: getUser({
|
|
198
|
+
...props,
|
|
206
199
|
...config
|
|
207
200
|
})
|
|
208
201
|
};
|
|
209
202
|
};
|
|
210
|
-
|
|
211
203
|
export { avatarExample, itemSubmenuExample, SmallViewportModeWrapper, getCustomPopoverConfig, getCustomPopoverContent, getInPlaceDialogConfig, getBrand, getMenuItems, getActionItems, getUser, getLayoutProps };
|