@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.
Files changed (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/es/TopNavBar/TopNavBarActionItems/TopNavBarActionItemsLocator.js +4 -2
  3. package/es/TopNavBar/TopNavBarActionItems/index.js +10 -35
  4. package/es/TopNavBar/TopNavBarActionItems/props.js +1 -0
  5. package/es/TopNavBar/TopNavBarActionItems/styles.js +0 -1
  6. package/es/TopNavBar/TopNavBarActionItems/theme.js +4 -4
  7. package/es/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.js +3 -5
  8. package/es/TopNavBar/TopNavBarBrand/index.js +6 -17
  9. package/es/TopNavBar/TopNavBarBrand/props.js +1 -0
  10. package/es/TopNavBar/TopNavBarBrand/styles.js +1 -2
  11. package/es/TopNavBar/TopNavBarBrand/theme.js +2 -2
  12. package/es/TopNavBar/TopNavBarContext.js +1 -1
  13. package/es/TopNavBar/TopNavBarItem/TopNavBarItemLocator.js +12 -15
  14. package/es/TopNavBar/TopNavBarItem/index.js +49 -136
  15. package/es/TopNavBar/TopNavBarItem/props.js +1 -0
  16. package/es/TopNavBar/TopNavBarItem/styles.js +5 -6
  17. package/es/TopNavBar/TopNavBarItem/theme.js +5 -5
  18. package/es/TopNavBar/TopNavBarLayout/DesktopLayout/TopNavBarDesktopLayoutLocator.js +3 -6
  19. package/es/TopNavBar/TopNavBarLayout/DesktopLayout/index.js +6 -20
  20. package/es/TopNavBar/TopNavBarLayout/DesktopLayout/props.js +5 -2
  21. package/es/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js +3 -4
  22. package/es/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +6 -6
  23. package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/TopNavBarSmallViewportLayoutLocator.js +8 -16
  24. package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js +25 -83
  25. package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.js +5 -2
  26. package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/styles.js +4 -5
  27. package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +6 -6
  28. package/es/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js +3 -1
  29. package/es/TopNavBar/TopNavBarLayout/index.js +8 -19
  30. package/es/TopNavBar/TopNavBarLayout/props.js +3 -1
  31. package/es/TopNavBar/TopNavBarLayout/theme.js +6 -4
  32. package/es/TopNavBar/TopNavBarLocator.js +2 -1
  33. package/es/TopNavBar/TopNavBarMenuItems/TopNavBarMenuItemsLocator.js +4 -4
  34. package/es/TopNavBar/TopNavBarMenuItems/index.js +9 -35
  35. package/es/TopNavBar/TopNavBarMenuItems/props.js +1 -0
  36. package/es/TopNavBar/TopNavBarMenuItems/styles.js +0 -1
  37. package/es/TopNavBar/TopNavBarMenuItems/theme.js +3 -3
  38. package/es/TopNavBar/TopNavBarUser/TopNavBarUserLocator.js +3 -1
  39. package/es/TopNavBar/TopNavBarUser/index.js +2 -18
  40. package/es/TopNavBar/TopNavBarUser/props.js +1 -0
  41. package/es/TopNavBar/TopNavBarUser/styles.js +0 -1
  42. package/es/TopNavBar/index.js +4 -12
  43. package/es/TopNavBar/props.js +1 -0
  44. package/es/TopNavBar/utils/exampleHelpers.js +9 -17
  45. package/es/TopNavBar/utils/exampleSvgFiles.js +1 -4
  46. package/es/TopNavBar/utils/mapItemsForDrilldown.js +16 -25
  47. package/es/index.js +1 -0
  48. package/lib/TopNavBar/TopNavBarActionItems/TopNavBarActionItemsLocator.js +3 -6
  49. package/lib/TopNavBar/TopNavBarActionItems/index.js +10 -55
  50. package/lib/TopNavBar/TopNavBarActionItems/props.js +1 -6
  51. package/lib/TopNavBar/TopNavBarActionItems/styles.js +0 -2
  52. package/lib/TopNavBar/TopNavBarActionItems/theme.js +4 -5
  53. package/lib/TopNavBar/TopNavBarBrand/TopNavBarBrandLocator.js +1 -8
  54. package/lib/TopNavBar/TopNavBarBrand/index.js +6 -30
  55. package/lib/TopNavBar/TopNavBarBrand/props.js +1 -3
  56. package/lib/TopNavBar/TopNavBarBrand/styles.js +1 -3
  57. package/lib/TopNavBar/TopNavBarBrand/theme.js +2 -3
  58. package/lib/TopNavBar/TopNavBarContext.js +0 -2
  59. package/lib/TopNavBar/TopNavBarItem/TopNavBarItemLocator.js +5 -15
  60. package/lib/TopNavBar/TopNavBarItem/index.js +49 -162
  61. package/lib/TopNavBar/TopNavBarItem/props.js +1 -6
  62. package/lib/TopNavBar/TopNavBarItem/styles.js +5 -7
  63. package/lib/TopNavBar/TopNavBarItem/theme.js +5 -6
  64. package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/TopNavBarDesktopLayoutLocator.js +3 -15
  65. package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/index.js +6 -30
  66. package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/props.js +5 -4
  67. package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js +3 -5
  68. package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/theme.js +6 -7
  69. package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/TopNavBarSmallViewportLayoutLocator.js +5 -21
  70. package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js +25 -111
  71. package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.js +5 -4
  72. package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/styles.js +4 -6
  73. package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/theme.js +6 -7
  74. package/lib/TopNavBar/TopNavBarLayout/TopNavBarLayoutLocator.js +1 -5
  75. package/lib/TopNavBar/TopNavBarLayout/index.js +8 -30
  76. package/lib/TopNavBar/TopNavBarLayout/props.js +3 -11
  77. package/lib/TopNavBar/TopNavBarLayout/theme.js +4 -7
  78. package/lib/TopNavBar/TopNavBarLocator.js +1 -3
  79. package/lib/TopNavBar/TopNavBarMenuItems/TopNavBarMenuItemsLocator.js +1 -7
  80. package/lib/TopNavBar/TopNavBarMenuItems/index.js +9 -52
  81. package/lib/TopNavBar/TopNavBarMenuItems/props.js +1 -5
  82. package/lib/TopNavBar/TopNavBarMenuItems/styles.js +0 -2
  83. package/lib/TopNavBar/TopNavBarMenuItems/theme.js +3 -4
  84. package/lib/TopNavBar/TopNavBarUser/TopNavBarUserLocator.js +1 -3
  85. package/lib/TopNavBar/TopNavBarUser/index.js +2 -29
  86. package/lib/TopNavBar/TopNavBarUser/props.js +1 -5
  87. package/lib/TopNavBar/TopNavBarUser/styles.js +0 -2
  88. package/lib/TopNavBar/index.js +3 -27
  89. package/lib/TopNavBar/props.js +1 -3
  90. package/lib/TopNavBar/utils/exampleHelpers.js +9 -39
  91. package/lib/TopNavBar/utils/exampleSvgFiles.js +0 -6
  92. package/lib/TopNavBar/utils/mapItemsForDrilldown.js +16 -37
  93. package/lib/index.js +0 -1
  94. package/package.json +27 -27
  95. 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; // TODO: try to type better, the themeOverride types are not prepared to be inherited and sorted
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
- desktopConfig = _this$props.desktopConfig,
95
- smallViewportConfig = _this$props.smallViewportConfig,
96
- styles = _this$props.styles,
97
- makeStyles = _this$props.makeStyles,
98
- restProps = _objectWithoutProperties(_this$props, _excluded);
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 = { ...commonPropTypes,
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 = { ...desktopTheme(theme),
34
+ const componentVariables = {
35
+ ...desktopTheme(theme),
34
36
  ...smallViewportTheme(theme)
35
37
  };
36
- return { ...componentVariables
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'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
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'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
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
- renderHiddenItemsMenuTriggerLabel = _this$props3.renderHiddenItemsMenuTriggerLabel,
106
- currentPageId = _this$props3.currentPageId;
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
- id = _child$props.id,
140
- status = _child$props.status,
141
- variant = _child$props.variant,
142
- renderSubmenu = _child$props.renderSubmenu,
143
- renderAvatar = _child$props.renderAvatar;
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
- listLabel = _this$props4.listLabel,
177
- styles = _this$props4.styles;
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';
@@ -61,5 +61,4 @@ const generateStyle = componentTheme => {
61
61
  itemSpacing: componentTheme.desktopItemSpacing
62
62
  };
63
63
  };
64
-
65
64
  export default generateStyle;
@@ -29,7 +29,7 @@
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
31
  const borders = theme.borders,
32
- typography = theme.typography;
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 { ...componentVariables
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'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
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
- id = _child$props.id,
78
- variant = _child$props.variant;
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';
@@ -41,5 +41,4 @@ const generateStyle = () => {
41
41
  }
42
42
  };
43
43
  };
44
-
45
44
  export default generateStyle;
@@ -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
- children = _this$props.children,
69
- mediaQueryMatch = _this$props.mediaQueryMatch,
70
- inverseColor = _this$props.inverseColor;
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',
@@ -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
  const propTypes = {
26
27
  children: PropTypes.func,
@@ -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({ ...props,
185
+ renderBrand: getBrand({
186
+ ...props,
197
187
  ...config
198
188
  }),
199
- renderMenuItems: getMenuItems({ ...props,
189
+ renderMenuItems: getMenuItems({
190
+ ...props,
200
191
  ...config
201
192
  }),
202
- renderActionItems: getActionItems({ ...props,
193
+ renderActionItems: getActionItems({
194
+ ...props,
203
195
  ...config
204
196
  }),
205
- renderUser: getUser({ ...props,
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 };