@instructure/ui-navigation 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (19) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/AppNav/v1/Item/index.js +46 -44
  3. package/es/AppNav/v1/Item/styles.js +4 -2
  4. package/es/AppNav/v1/Item/theme.js +11 -10
  5. package/es/AppNav/v1/index.js +42 -39
  6. package/es/AppNav/v1/theme.js +11 -10
  7. package/es/AppNav/v2/Item/index.js +46 -44
  8. package/es/AppNav/v2/Item/styles.js +4 -2
  9. package/es/AppNav/v2/index.js +42 -39
  10. package/lib/AppNav/v1/Item/index.js +46 -44
  11. package/lib/AppNav/v1/Item/styles.js +4 -2
  12. package/lib/AppNav/v1/Item/theme.js +11 -10
  13. package/lib/AppNav/v1/index.js +42 -39
  14. package/lib/AppNav/v1/theme.js +11 -10
  15. package/lib/AppNav/v2/Item/index.js +46 -44
  16. package/lib/AppNav/v2/Item/styles.js +4 -2
  17. package/lib/AppNav/v2/index.js +42 -39
  18. package/package.json +23 -23
  19. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-navigation
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/AppNav/v1/Item/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Item;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -40,47 +40,54 @@ id: AppNav.Item
40
40
  @module Item
41
41
  **/
42
42
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
43
- let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Item = class Item extends Component {
44
- constructor(...args) {
45
- super(...args);
46
- this.ref = null;
47
- this.handleRef = el => {
48
- const elementRef = this.props.elementRef;
49
- this.ref = el;
50
- if (typeof elementRef === 'function') {
51
- elementRef(el);
52
- }
53
- };
54
- this.handleClick = e => {
55
- const _this$props = this.props,
56
- isDisabled = _this$props.isDisabled,
57
- onClick = _this$props.onClick;
58
- if (isDisabled) {
59
- e.preventDefault();
60
- e.stopPropagation();
61
- } else if (typeof onClick === 'function') {
62
- onClick(e);
63
- }
64
- };
65
- }
43
+ let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Item extends Component {
44
+ static displayName = "Item";
45
+ static componentId = 'AppNav.Item';
46
+ static allowedProps = allowedProps;
47
+ static defaultProps = {
48
+ children: null,
49
+ isSelected: false,
50
+ cursor: 'pointer',
51
+ isDisabled: false
52
+ };
53
+ ref = null;
66
54
  componentDidMount() {
67
- var _this$props$makeStyle, _this$props2;
68
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
55
+ this.props.makeStyles?.();
69
56
  }
70
57
  componentDidUpdate() {
71
- var _this$props$makeStyle2, _this$props3;
72
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
58
+ this.props.makeStyles?.();
73
59
  }
60
+ handleRef = el => {
61
+ const {
62
+ elementRef
63
+ } = this.props;
64
+ this.ref = el;
65
+ if (typeof elementRef === 'function') {
66
+ elementRef(el);
67
+ }
68
+ };
69
+ handleClick = e => {
70
+ const {
71
+ isDisabled,
72
+ onClick
73
+ } = this.props;
74
+ if (isDisabled) {
75
+ e.preventDefault();
76
+ e.stopPropagation();
77
+ } else if (typeof onClick === 'function') {
78
+ onClick(e);
79
+ }
80
+ };
74
81
  render() {
75
- var _this$props$styles, _this$props$styles2;
76
82
  const ElementType = getElementType(Item, this.props);
77
- const _this$props4 = this.props,
78
- renderIcon = _this$props4.renderIcon,
79
- renderLabel = _this$props4.renderLabel,
80
- href = _this$props4.href,
81
- renderAfter = _this$props4.renderAfter,
82
- cursor = _this$props4.cursor,
83
- isDisabled = _this$props4.isDisabled;
83
+ const {
84
+ renderIcon,
85
+ renderLabel,
86
+ href,
87
+ renderAfter,
88
+ cursor,
89
+ isDisabled
90
+ } = this.props;
84
91
  const icon = callRenderProp(renderIcon);
85
92
  const label = callRenderProp(renderLabel);
86
93
  const labelIsForScreenReaders = matchComponentTypes(label, [ScreenReaderContent]);
@@ -98,19 +105,14 @@ let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
98
105
  position: "relative",
99
106
  borderRadius: "medium",
100
107
  cursor: isDisabled ? 'not-allowed' : cursor,
101
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item,
108
+ css: this.props.styles?.item,
102
109
  "data-cid": "AppNav.Item",
103
110
  children: [icon, labelIsForScreenReaders ? label : _jsx("span", {
104
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
111
+ css: this.props.styles?.label,
105
112
  children: label
106
113
  }), renderAfter && callRenderProp(renderAfter)]
107
114
  });
108
115
  }
109
- }, _Item.displayName = "Item", _Item.componentId = 'AppNav.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
110
- children: null,
111
- isSelected: false,
112
- cursor: 'pointer',
113
- isDisabled: false
114
- }, _Item)) || _class);
116
+ }) || _class);
115
117
  export default Item;
116
118
  export { Item };
package/es/AppNav/v1/Item/styles.js CHANGED
@@ -33,8 +33,10 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const isSelected = props.isSelected,
37
- isDisabled = props.isDisabled;
36
+ const {
37
+ isSelected,
38
+ isDisabled
39
+ } = props;
38
40
  const itemStyles = {
39
41
  appearance: 'none',
40
42
  overflow: 'visible',
package/es/AppNav/v1/Item/theme.js CHANGED
@@ -28,19 +28,20 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
32
- const colors = theme.colors,
33
- spacing = theme.spacing,
34
- typography = theme.typography;
31
+ const {
32
+ colors,
33
+ spacing,
34
+ typography
35
+ } = theme;
35
36
  const componentVariables = {
36
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
37
+ fontFamily: typography?.fontFamily,
37
38
  fontSize: '1.125rem',
38
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
39
- textColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
40
- textColorSelected: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
39
+ fontWeight: typography?.fontWeightBold,
40
+ textColor: colors?.contrasts?.blue4570,
41
+ textColorSelected: colors?.contrasts?.grey125125,
41
42
  height: '2.25rem',
42
- padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
43
- backgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010
43
+ padding: spacing?.small,
44
+ backgroundColor: colors?.contrasts?.white1010
44
45
  };
45
46
  return {
46
47
  ...componentVariables
package/es/AppNav/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _AppNav;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -40,29 +40,37 @@ category: components
40
40
  ---
41
41
  **/
42
42
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
43
- let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_AppNav = class AppNav extends Component {
44
- constructor(...args) {
45
- super(...args);
46
- this.state = {
47
- isMeasuring: false
48
- };
49
- this.ref = null;
50
- this.handleRef = el => {
51
- const elementRef = this.props.elementRef;
52
- this.ref = el;
53
- if (typeof elementRef === 'function') {
54
- elementRef(el);
55
- }
56
- };
57
- }
43
+ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class AppNav extends Component {
44
+ static displayName = "AppNav";
45
+ static componentId = 'AppNav';
46
+ static allowedProps = allowedProps;
47
+ static defaultProps = {
48
+ children: null,
49
+ debounce: 300,
50
+ margin: '0',
51
+ renderTruncateLabel: () => 'More',
52
+ visibleItemsCount: 0
53
+ };
54
+ static Item = Item;
55
+ state = {
56
+ isMeasuring: false
57
+ };
58
+ ref = null;
58
59
  componentDidMount() {
59
- var _this$props$makeStyle, _this$props;
60
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
60
+ this.props.makeStyles?.();
61
61
  }
62
62
  componentDidUpdate() {
63
- var _this$props$makeStyle2, _this$props2;
64
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
63
+ this.props.makeStyles?.();
65
64
  }
65
+ handleRef = el => {
66
+ const {
67
+ elementRef
68
+ } = this.props;
69
+ this.ref = el;
70
+ if (typeof elementRef === 'function') {
71
+ elementRef(el);
72
+ }
73
+ };
66
74
  renderMenu(items) {
67
75
  return _jsx(Menu, {
68
76
  trigger: _jsx(AppNav.Item, {
@@ -70,20 +78,21 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cla
70
78
  }),
71
79
  children: items.map((item, index) => {
72
80
  return _jsx(Menu.Item, {
73
- href: item.props.href ? item.props.href : void 0,
74
- onClick: item.props.onClick && !item.props.href ? item.props.onClick : void 0,
81
+ href: item.props.href ? item.props.href : undefined,
82
+ onClick: item.props.onClick && !item.props.href ? item.props.onClick : undefined,
75
83
  children: callRenderProp(item.props.renderLabel)
76
84
  }, index);
77
85
  })
78
86
  });
79
87
  }
80
88
  render() {
81
- const _this$props3 = this.props,
82
- visibleItemsCount = _this$props3.visibleItemsCount,
83
- screenReaderLabel = _this$props3.screenReaderLabel,
84
- margin = _this$props3.margin,
85
- debounce = _this$props3.debounce,
86
- styles = _this$props3.styles;
89
+ const {
90
+ visibleItemsCount,
91
+ screenReaderLabel,
92
+ margin,
93
+ debounce,
94
+ styles
95
+ } = this.props;
87
96
  const passthroughProps = View.omitViewProps(omitProps(this.props, AppNav.allowedProps), AppNav);
88
97
  const renderBeforeItems = callRenderProp(this.props.renderBeforeItems);
89
98
  const renderAfterItems = callRenderProp(this.props.renderAfterItems);
@@ -91,7 +100,7 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cla
91
100
  return _jsxs(View, {
92
101
  ...passthroughProps,
93
102
  as: "nav",
94
- css: [styles === null || styles === void 0 ? void 0 : styles.appNav, hasRenderedContent ? styles === null || styles === void 0 ? void 0 : styles.alignCenter : ''],
103
+ css: [styles?.appNav, hasRenderedContent ? styles?.alignCenter : ''],
95
104
  margin: margin,
96
105
  display: hasRenderedContent ? 'flex' : 'block',
97
106
  elementRef: this.handleRef,
@@ -103,9 +112,9 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cla
103
112
  debounce: debounce,
104
113
  onUpdate: this.props.onUpdate,
105
114
  renderHiddenItemMenu: hiddenChildren => this.renderMenu(hiddenChildren),
106
- itemSpacing: styles === null || styles === void 0 ? void 0 : styles.horizontalMargin,
107
- fixMenuTriggerWidth: styles === null || styles === void 0 ? void 0 : styles.menuTriggerWidth,
108
- css: styles === null || styles === void 0 ? void 0 : styles.list,
115
+ itemSpacing: styles?.horizontalMargin,
116
+ fixMenuTriggerWidth: styles?.menuTriggerWidth,
117
+ css: styles?.list,
109
118
  "aria-label": callRenderProp(screenReaderLabel),
110
119
  children: this.props.children
111
120
  }), renderAfterItems && _jsx("span", {
@@ -113,12 +122,6 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cla
113
122
  })]
114
123
  });
115
124
  }
116
- }, _AppNav.displayName = "AppNav", _AppNav.componentId = 'AppNav', _AppNav.allowedProps = allowedProps, _AppNav.defaultProps = {
117
- children: null,
118
- debounce: 300,
119
- margin: '0',
120
- renderTruncateLabel: () => 'More',
121
- visibleItemsCount: 0
122
- }, _AppNav.Item = Item, _AppNav)) || _class);
125
+ }) || _class);
123
126
  export { AppNav };
124
127
  export default AppNav;
package/es/AppNav/v1/theme.js CHANGED
@@ -28,19 +28,20 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts;
32
- const colors = theme.colors,
33
- borders = theme.borders,
34
- spacing = theme.spacing,
35
- typography = theme.typography;
31
+ const {
32
+ colors,
33
+ borders,
34
+ spacing,
35
+ typography
36
+ } = theme;
36
37
  const componentVariables = {
37
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
38
+ fontFamily: typography?.fontFamily,
38
39
  height: '3.75rem',
39
40
  // 60px per product design
40
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey1424,
41
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
42
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
43
- horizontalMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
41
+ borderColor: colors?.contrasts?.grey1424,
42
+ borderStyle: borders?.style,
43
+ borderWidth: borders?.widthSmall,
44
+ horizontalMargin: spacing?.xxSmall,
44
45
  menuTriggerWidth: '7.5rem'
45
46
  };
46
47
  return {
package/es/AppNav/v2/Item/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Item;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -39,47 +39,54 @@ id: AppNav.Item
39
39
  @module Item
40
40
  **/
41
41
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
- let Item = (_dec = withStyle(generateStyle), _dec(_class = (_Item = class Item extends Component {
43
- constructor(...args) {
44
- super(...args);
45
- this.ref = null;
46
- this.handleRef = el => {
47
- const elementRef = this.props.elementRef;
48
- this.ref = el;
49
- if (typeof elementRef === 'function') {
50
- elementRef(el);
51
- }
52
- };
53
- this.handleClick = e => {
54
- const _this$props = this.props,
55
- isDisabled = _this$props.isDisabled,
56
- onClick = _this$props.onClick;
57
- if (isDisabled) {
58
- e.preventDefault();
59
- e.stopPropagation();
60
- } else if (typeof onClick === 'function') {
61
- onClick(e);
62
- }
63
- };
64
- }
42
+ let Item = (_dec = withStyle(generateStyle), _dec(_class = class Item extends Component {
43
+ static displayName = "Item";
44
+ static componentId = 'AppNav.Item';
45
+ static allowedProps = allowedProps;
46
+ static defaultProps = {
47
+ children: null,
48
+ isSelected: false,
49
+ cursor: 'pointer',
50
+ isDisabled: false
51
+ };
52
+ ref = null;
65
53
  componentDidMount() {
66
- var _this$props$makeStyle, _this$props2;
67
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
54
+ this.props.makeStyles?.();
68
55
  }
69
56
  componentDidUpdate() {
70
- var _this$props$makeStyle2, _this$props3;
71
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
57
+ this.props.makeStyles?.();
72
58
  }
59
+ handleRef = el => {
60
+ const {
61
+ elementRef
62
+ } = this.props;
63
+ this.ref = el;
64
+ if (typeof elementRef === 'function') {
65
+ elementRef(el);
66
+ }
67
+ };
68
+ handleClick = e => {
69
+ const {
70
+ isDisabled,
71
+ onClick
72
+ } = this.props;
73
+ if (isDisabled) {
74
+ e.preventDefault();
75
+ e.stopPropagation();
76
+ } else if (typeof onClick === 'function') {
77
+ onClick(e);
78
+ }
79
+ };
73
80
  render() {
74
- var _this$props$styles, _this$props$styles2;
75
81
  const ElementType = getElementType(Item, this.props);
76
- const _this$props4 = this.props,
77
- renderIcon = _this$props4.renderIcon,
78
- renderLabel = _this$props4.renderLabel,
79
- href = _this$props4.href,
80
- renderAfter = _this$props4.renderAfter,
81
- cursor = _this$props4.cursor,
82
- isDisabled = _this$props4.isDisabled;
82
+ const {
83
+ renderIcon,
84
+ renderLabel,
85
+ href,
86
+ renderAfter,
87
+ cursor,
88
+ isDisabled
89
+ } = this.props;
83
90
  const icon = callRenderProp(renderIcon);
84
91
  const label = callRenderProp(renderLabel);
85
92
  const labelIsForScreenReaders = matchComponentTypes(label, [ScreenReaderContent]);
@@ -97,19 +104,14 @@ let Item = (_dec = withStyle(generateStyle), _dec(_class = (_Item = class Item e
97
104
  position: "relative",
98
105
  borderRadius: "medium",
99
106
  cursor: isDisabled ? 'not-allowed' : cursor,
100
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item,
107
+ css: this.props.styles?.item,
101
108
  "data-cid": "AppNav.Item",
102
109
  children: [icon, labelIsForScreenReaders ? label : _jsx("span", {
103
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
110
+ css: this.props.styles?.label,
104
111
  children: label
105
112
  }), renderAfter && callRenderProp(renderAfter)]
106
113
  });
107
114
  }
108
- }, _Item.displayName = "Item", _Item.componentId = 'AppNav.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
109
- children: null,
110
- isSelected: false,
111
- cursor: 'pointer',
112
- isDisabled: false
113
- }, _Item)) || _class);
115
+ }) || _class);
114
116
  export default Item;
115
117
  export { Item };
package/es/AppNav/v2/Item/styles.js CHANGED
@@ -33,8 +33,10 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const isSelected = props.isSelected,
37
- isDisabled = props.isDisabled;
36
+ const {
37
+ isSelected,
38
+ isDisabled
39
+ } = props;
38
40
  const itemStyles = {
39
41
  appearance: 'none',
40
42
  overflow: 'visible',
package/es/AppNav/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _AppNav;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -39,29 +39,37 @@ category: components
39
39
  ---
40
40
  **/
41
41
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
- let AppNav = (_dec = withStyle(generateStyle), _dec(_class = (_AppNav = class AppNav extends Component {
43
- constructor(...args) {
44
- super(...args);
45
- this.state = {
46
- isMeasuring: false
47
- };
48
- this.ref = null;
49
- this.handleRef = el => {
50
- const elementRef = this.props.elementRef;
51
- this.ref = el;
52
- if (typeof elementRef === 'function') {
53
- elementRef(el);
54
- }
55
- };
56
- }
42
+ let AppNav = (_dec = withStyle(generateStyle), _dec(_class = class AppNav extends Component {
43
+ static displayName = "AppNav";
44
+ static componentId = 'AppNav';
45
+ static allowedProps = allowedProps;
46
+ static defaultProps = {
47
+ children: null,
48
+ debounce: 300,
49
+ margin: '0',
50
+ renderTruncateLabel: () => 'More',
51
+ visibleItemsCount: 0
52
+ };
53
+ static Item = Item;
54
+ state = {
55
+ isMeasuring: false
56
+ };
57
+ ref = null;
57
58
  componentDidMount() {
58
- var _this$props$makeStyle, _this$props;
59
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
59
+ this.props.makeStyles?.();
60
60
  }
61
61
  componentDidUpdate() {
62
- var _this$props$makeStyle2, _this$props2;
63
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
62
+ this.props.makeStyles?.();
64
63
  }
64
+ handleRef = el => {
65
+ const {
66
+ elementRef
67
+ } = this.props;
68
+ this.ref = el;
69
+ if (typeof elementRef === 'function') {
70
+ elementRef(el);
71
+ }
72
+ };
65
73
  renderMenu(items) {
66
74
  return _jsx(Menu, {
67
75
  trigger: _jsx(AppNav.Item, {
@@ -69,20 +77,21 @@ let AppNav = (_dec = withStyle(generateStyle), _dec(_class = (_AppNav = class Ap
69
77
  }),
70
78
  children: items.map((item, index) => {
71
79
  return _jsx(Menu.Item, {
72
- href: item.props.href ? item.props.href : void 0,
73
- onClick: item.props.onClick && !item.props.href ? item.props.onClick : void 0,
80
+ href: item.props.href ? item.props.href : undefined,
81
+ onClick: item.props.onClick && !item.props.href ? item.props.onClick : undefined,
74
82
  children: callRenderProp(item.props.renderLabel)
75
83
  }, index);
76
84
  })
77
85
  });
78
86
  }
79
87
  render() {
80
- const _this$props3 = this.props,
81
- visibleItemsCount = _this$props3.visibleItemsCount,
82
- screenReaderLabel = _this$props3.screenReaderLabel,
83
- margin = _this$props3.margin,
84
- debounce = _this$props3.debounce,
85
- styles = _this$props3.styles;
88
+ const {
89
+ visibleItemsCount,
90
+ screenReaderLabel,
91
+ margin,
92
+ debounce,
93
+ styles
94
+ } = this.props;
86
95
  const passthroughProps = View.omitViewProps(omitProps(this.props, AppNav.allowedProps), AppNav);
87
96
  const renderBeforeItems = callRenderProp(this.props.renderBeforeItems);
88
97
  const renderAfterItems = callRenderProp(this.props.renderAfterItems);
@@ -90,7 +99,7 @@ let AppNav = (_dec = withStyle(generateStyle), _dec(_class = (_AppNav = class Ap
90
99
  return _jsxs(View, {
91
100
  ...passthroughProps,
92
101
  as: "nav",
93
- css: [styles === null || styles === void 0 ? void 0 : styles.appNav, hasRenderedContent ? styles === null || styles === void 0 ? void 0 : styles.alignCenter : ''],
102
+ css: [styles?.appNav, hasRenderedContent ? styles?.alignCenter : ''],
94
103
  margin: margin,
95
104
  display: hasRenderedContent ? 'flex' : 'block',
96
105
  elementRef: this.handleRef,
@@ -102,9 +111,9 @@ let AppNav = (_dec = withStyle(generateStyle), _dec(_class = (_AppNav = class Ap
102
111
  debounce: debounce,
103
112
  onUpdate: this.props.onUpdate,
104
113
  renderHiddenItemMenu: hiddenChildren => this.renderMenu(hiddenChildren),
105
- itemSpacing: styles === null || styles === void 0 ? void 0 : styles.horizontalMargin,
106
- fixMenuTriggerWidth: styles === null || styles === void 0 ? void 0 : styles.menuTriggerWidth,
107
- css: styles === null || styles === void 0 ? void 0 : styles.list,
114
+ itemSpacing: styles?.horizontalMargin,
115
+ fixMenuTriggerWidth: styles?.menuTriggerWidth,
116
+ css: styles?.list,
108
117
  "aria-label": callRenderProp(screenReaderLabel),
109
118
  children: this.props.children
110
119
  }), renderAfterItems && _jsx("span", {
@@ -112,12 +121,6 @@ let AppNav = (_dec = withStyle(generateStyle), _dec(_class = (_AppNav = class Ap
112
121
  })]
113
122
  });
114
123
  }
115
- }, _AppNav.displayName = "AppNav", _AppNav.componentId = 'AppNav', _AppNav.allowedProps = allowedProps, _AppNav.defaultProps = {
116
- children: null,
117
- debounce: 300,
118
- margin: '0',
119
- renderTruncateLabel: () => 'More',
120
- visibleItemsCount: 0
121
- }, _AppNav.Item = Item, _AppNav)) || _class);
124
+ }) || _class);
122
125
  export { AppNav };
123
126
  export default AppNav;