@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/lib/AppNav/v1/Item/index.js CHANGED
@@ -18,7 +18,7 @@ var _styles = _interopRequireDefault(require("./styles"));
18
18
  var _theme = _interopRequireDefault(require("./theme"));
19
19
  var _props = require("./props");
20
20
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
21
- var _dec, _class, _Item;
21
+ var _dec, _class;
22
22
  /*
23
23
  * The MIT License (MIT)
24
24
  *
@@ -49,47 +49,54 @@ id: AppNav.Item
49
49
  ---
50
50
  @module Item
51
51
  **/
52
- let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Item = class Item extends _react.Component {
53
- constructor(...args) {
54
- super(...args);
55
- this.ref = null;
56
- this.handleRef = el => {
57
- const elementRef = this.props.elementRef;
58
- this.ref = el;
59
- if (typeof elementRef === 'function') {
60
- elementRef(el);
61
- }
62
- };
63
- this.handleClick = e => {
64
- const _this$props = this.props,
65
- isDisabled = _this$props.isDisabled,
66
- onClick = _this$props.onClick;
67
- if (isDisabled) {
68
- e.preventDefault();
69
- e.stopPropagation();
70
- } else if (typeof onClick === 'function') {
71
- onClick(e);
72
- }
73
- };
74
- }
52
+ let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class Item extends _react.Component {
53
+ static displayName = "Item";
54
+ static componentId = 'AppNav.Item';
55
+ static allowedProps = _props.allowedProps;
56
+ static defaultProps = {
57
+ children: null,
58
+ isSelected: false,
59
+ cursor: 'pointer',
60
+ isDisabled: false
61
+ };
62
+ ref = null;
75
63
  componentDidMount() {
76
- var _this$props$makeStyle, _this$props2;
77
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
64
+ this.props.makeStyles?.();
78
65
  }
79
66
  componentDidUpdate() {
80
- var _this$props$makeStyle2, _this$props3;
81
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
67
+ this.props.makeStyles?.();
82
68
  }
69
+ handleRef = el => {
70
+ const {
71
+ elementRef
72
+ } = this.props;
73
+ this.ref = el;
74
+ if (typeof elementRef === 'function') {
75
+ elementRef(el);
76
+ }
77
+ };
78
+ handleClick = e => {
79
+ const {
80
+ isDisabled,
81
+ onClick
82
+ } = this.props;
83
+ if (isDisabled) {
84
+ e.preventDefault();
85
+ e.stopPropagation();
86
+ } else if (typeof onClick === 'function') {
87
+ onClick(e);
88
+ }
89
+ };
83
90
  render() {
84
- var _this$props$styles, _this$props$styles2;
85
91
  const ElementType = (0, _getElementType.getElementType)(Item, this.props);
86
- const _this$props4 = this.props,
87
- renderIcon = _this$props4.renderIcon,
88
- renderLabel = _this$props4.renderLabel,
89
- href = _this$props4.href,
90
- renderAfter = _this$props4.renderAfter,
91
- cursor = _this$props4.cursor,
92
- isDisabled = _this$props4.isDisabled;
92
+ const {
93
+ renderIcon,
94
+ renderLabel,
95
+ href,
96
+ renderAfter,
97
+ cursor,
98
+ isDisabled
99
+ } = this.props;
93
100
  const icon = (0, _callRenderProp.callRenderProp)(renderIcon);
94
101
  const label = (0, _callRenderProp.callRenderProp)(renderLabel);
95
102
  const labelIsForScreenReaders = (0, _matchComponentTypes.matchComponentTypes)(label, [_ScreenReaderContent.ScreenReaderContent]);
@@ -107,18 +114,13 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
107
114
  position: "relative",
108
115
  borderRadius: "medium",
109
116
  cursor: isDisabled ? 'not-allowed' : cursor,
110
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item,
117
+ css: this.props.styles?.item,
111
118
  "data-cid": "AppNav.Item",
112
119
  children: [icon, labelIsForScreenReaders ? label : (0, _jsxRuntime.jsx)("span", {
113
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
120
+ css: this.props.styles?.label,
114
121
  children: label
115
122
  }), renderAfter && (0, _callRenderProp.callRenderProp)(renderAfter)]
116
123
  });
117
124
  }
118
- }, _Item.displayName = "Item", _Item.componentId = 'AppNav.Item', _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
119
- children: null,
120
- isSelected: false,
121
- cursor: 'pointer',
122
- isDisabled: false
123
- }, _Item)) || _class);
125
+ }) || _class);
124
126
  var _default = exports.default = Item;
package/lib/AppNav/v1/Item/styles.js CHANGED
@@ -39,8 +39,10 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props) => {
42
- const isSelected = props.isSelected,
43
- isDisabled = props.isDisabled;
42
+ const {
43
+ isSelected,
44
+ isDisabled
45
+ } = props;
44
46
  const itemStyles = {
45
47
  appearance: 'none',
46
48
  overflow: 'visible',
package/lib/AppNav/v1/Item/theme.js CHANGED
@@ -34,19 +34,20 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
38
- const colors = theme.colors,
39
- spacing = theme.spacing,
40
- typography = theme.typography;
37
+ const {
38
+ colors,
39
+ spacing,
40
+ typography
41
+ } = theme;
41
42
  const componentVariables = {
42
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
43
+ fontFamily: typography?.fontFamily,
43
44
  fontSize: '1.125rem',
44
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
45
- textColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
46
- textColorSelected: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
45
+ fontWeight: typography?.fontWeightBold,
46
+ textColor: colors?.contrasts?.blue4570,
47
+ textColorSelected: colors?.contrasts?.grey125125,
47
48
  height: '2.25rem',
48
- padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
49
- backgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010
49
+ padding: spacing?.small,
50
+ backgroundColor: colors?.contrasts?.white1010
50
51
  };
51
52
  return {
52
53
  ...componentVariables
package/lib/AppNav/v1/index.js CHANGED
@@ -17,7 +17,7 @@ var _theme = _interopRequireDefault(require("./theme"));
17
17
  var _props = require("./props");
18
18
  var _TruncateList = require("@instructure/ui-truncate-list/lib/TruncateList");
19
19
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
20
- var _dec, _class, _AppNav;
20
+ var _dec, _class;
21
21
  /*
22
22
  * The MIT License (MIT)
23
23
  *
@@ -46,29 +46,37 @@ var _dec, _class, _AppNav;
46
46
  category: components
47
47
  ---
48
48
  **/
49
- let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_AppNav = class AppNav extends _react.Component {
50
- constructor(...args) {
51
- super(...args);
52
- this.state = {
53
- isMeasuring: false
54
- };
55
- this.ref = null;
56
- this.handleRef = el => {
57
- const elementRef = this.props.elementRef;
58
- this.ref = el;
59
- if (typeof elementRef === 'function') {
60
- elementRef(el);
61
- }
62
- };
63
- }
49
+ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class AppNav extends _react.Component {
50
+ static displayName = "AppNav";
51
+ static componentId = 'AppNav';
52
+ static allowedProps = _props.allowedProps;
53
+ static defaultProps = {
54
+ children: null,
55
+ debounce: 300,
56
+ margin: '0',
57
+ renderTruncateLabel: () => 'More',
58
+ visibleItemsCount: 0
59
+ };
60
+ static Item = _Item.Item;
61
+ state = {
62
+ isMeasuring: false
63
+ };
64
+ ref = null;
64
65
  componentDidMount() {
65
- var _this$props$makeStyle, _this$props;
66
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
66
+ this.props.makeStyles?.();
67
67
  }
68
68
  componentDidUpdate() {
69
- var _this$props$makeStyle2, _this$props2;
70
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
69
+ this.props.makeStyles?.();
71
70
  }
71
+ handleRef = el => {
72
+ const {
73
+ elementRef
74
+ } = this.props;
75
+ this.ref = el;
76
+ if (typeof elementRef === 'function') {
77
+ elementRef(el);
78
+ }
79
+ };
72
80
  renderMenu(items) {
73
81
  return (0, _jsxRuntime.jsx)(_v11_2.Menu, {
74
82
  trigger: (0, _jsxRuntime.jsx)(AppNav.Item, {
@@ -76,20 +84,21 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleLegacy)(_styles.defa
76
84
  }),
77
85
  children: items.map((item, index) => {
78
86
  return (0, _jsxRuntime.jsx)(_v11_2.Menu.Item, {
79
- href: item.props.href ? item.props.href : void 0,
80
- onClick: item.props.onClick && !item.props.href ? item.props.onClick : void 0,
87
+ href: item.props.href ? item.props.href : undefined,
88
+ onClick: item.props.onClick && !item.props.href ? item.props.onClick : undefined,
81
89
  children: (0, _callRenderProp.callRenderProp)(item.props.renderLabel)
82
90
  }, index);
83
91
  })
84
92
  });
85
93
  }
86
94
  render() {
87
- const _this$props3 = this.props,
88
- visibleItemsCount = _this$props3.visibleItemsCount,
89
- screenReaderLabel = _this$props3.screenReaderLabel,
90
- margin = _this$props3.margin,
91
- debounce = _this$props3.debounce,
92
- styles = _this$props3.styles;
95
+ const {
96
+ visibleItemsCount,
97
+ screenReaderLabel,
98
+ margin,
99
+ debounce,
100
+ styles
101
+ } = this.props;
93
102
  const passthroughProps = _v11_.View.omitViewProps((0, _omitProps.omitProps)(this.props, AppNav.allowedProps), AppNav);
94
103
  const renderBeforeItems = (0, _callRenderProp.callRenderProp)(this.props.renderBeforeItems);
95
104
  const renderAfterItems = (0, _callRenderProp.callRenderProp)(this.props.renderAfterItems);
@@ -97,7 +106,7 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleLegacy)(_styles.defa
97
106
  return (0, _jsxRuntime.jsxs)(_v11_.View, {
98
107
  ...passthroughProps,
99
108
  as: "nav",
100
- css: [styles === null || styles === void 0 ? void 0 : styles.appNav, hasRenderedContent ? styles === null || styles === void 0 ? void 0 : styles.alignCenter : ''],
109
+ css: [styles?.appNav, hasRenderedContent ? styles?.alignCenter : ''],
101
110
  margin: margin,
102
111
  display: hasRenderedContent ? 'flex' : 'block',
103
112
  elementRef: this.handleRef,
@@ -109,9 +118,9 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleLegacy)(_styles.defa
109
118
  debounce: debounce,
110
119
  onUpdate: this.props.onUpdate,
111
120
  renderHiddenItemMenu: hiddenChildren => this.renderMenu(hiddenChildren),
112
- itemSpacing: styles === null || styles === void 0 ? void 0 : styles.horizontalMargin,
113
- fixMenuTriggerWidth: styles === null || styles === void 0 ? void 0 : styles.menuTriggerWidth,
114
- css: styles === null || styles === void 0 ? void 0 : styles.list,
121
+ itemSpacing: styles?.horizontalMargin,
122
+ fixMenuTriggerWidth: styles?.menuTriggerWidth,
123
+ css: styles?.list,
115
124
  "aria-label": (0, _callRenderProp.callRenderProp)(screenReaderLabel),
116
125
  children: this.props.children
117
126
  }), renderAfterItems && (0, _jsxRuntime.jsx)("span", {
@@ -119,11 +128,5 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleLegacy)(_styles.defa
119
128
  })]
120
129
  });
121
130
  }
122
- }, _AppNav.displayName = "AppNav", _AppNav.componentId = 'AppNav', _AppNav.allowedProps = _props.allowedProps, _AppNav.defaultProps = {
123
- children: null,
124
- debounce: 300,
125
- margin: '0',
126
- renderTruncateLabel: () => 'More',
127
- visibleItemsCount: 0
128
- }, _AppNav.Item = _Item.Item, _AppNav)) || _class);
131
+ }) || _class);
129
132
  var _default = exports.default = AppNav;
package/lib/AppNav/v1/theme.js CHANGED
@@ -34,19 +34,20 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts;
38
- const colors = theme.colors,
39
- borders = theme.borders,
40
- spacing = theme.spacing,
41
- typography = theme.typography;
37
+ const {
38
+ colors,
39
+ borders,
40
+ spacing,
41
+ typography
42
+ } = theme;
42
43
  const componentVariables = {
43
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
44
+ fontFamily: typography?.fontFamily,
44
45
  height: '3.75rem',
45
46
  // 60px per product design
46
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey1424,
47
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
48
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
49
- horizontalMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
47
+ borderColor: colors?.contrasts?.grey1424,
48
+ borderStyle: borders?.style,
49
+ borderWidth: borders?.widthSmall,
50
+ horizontalMargin: spacing?.xxSmall,
50
51
  menuTriggerWidth: '7.5rem'
51
52
  };
52
53
  return {
package/lib/AppNav/v2/Item/index.js CHANGED
@@ -17,7 +17,7 @@ var _emotion = require("@instructure/emotion");
17
17
  var _styles = _interopRequireDefault(require("./styles"));
18
18
  var _props = require("./props");
19
19
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
20
- var _dec, _class, _Item;
20
+ var _dec, _class;
21
21
  /*
22
22
  * The MIT License (MIT)
23
23
  *
@@ -48,47 +48,54 @@ id: AppNav.Item
48
48
  ---
49
49
  @module Item
50
50
  **/
51
- let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Item = class Item extends _react.Component {
52
- constructor(...args) {
53
- super(...args);
54
- this.ref = null;
55
- this.handleRef = el => {
56
- const elementRef = this.props.elementRef;
57
- this.ref = el;
58
- if (typeof elementRef === 'function') {
59
- elementRef(el);
60
- }
61
- };
62
- this.handleClick = e => {
63
- const _this$props = this.props,
64
- isDisabled = _this$props.isDisabled,
65
- onClick = _this$props.onClick;
66
- if (isDisabled) {
67
- e.preventDefault();
68
- e.stopPropagation();
69
- } else if (typeof onClick === 'function') {
70
- onClick(e);
71
- }
72
- };
73
- }
51
+ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class Item extends _react.Component {
52
+ static displayName = "Item";
53
+ static componentId = 'AppNav.Item';
54
+ static allowedProps = _props.allowedProps;
55
+ static defaultProps = {
56
+ children: null,
57
+ isSelected: false,
58
+ cursor: 'pointer',
59
+ isDisabled: false
60
+ };
61
+ ref = null;
74
62
  componentDidMount() {
75
- var _this$props$makeStyle, _this$props2;
76
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
63
+ this.props.makeStyles?.();
77
64
  }
78
65
  componentDidUpdate() {
79
- var _this$props$makeStyle2, _this$props3;
80
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
66
+ this.props.makeStyles?.();
81
67
  }
68
+ handleRef = el => {
69
+ const {
70
+ elementRef
71
+ } = this.props;
72
+ this.ref = el;
73
+ if (typeof elementRef === 'function') {
74
+ elementRef(el);
75
+ }
76
+ };
77
+ handleClick = e => {
78
+ const {
79
+ isDisabled,
80
+ onClick
81
+ } = this.props;
82
+ if (isDisabled) {
83
+ e.preventDefault();
84
+ e.stopPropagation();
85
+ } else if (typeof onClick === 'function') {
86
+ onClick(e);
87
+ }
88
+ };
82
89
  render() {
83
- var _this$props$styles, _this$props$styles2;
84
90
  const ElementType = (0, _getElementType.getElementType)(Item, this.props);
85
- const _this$props4 = this.props,
86
- renderIcon = _this$props4.renderIcon,
87
- renderLabel = _this$props4.renderLabel,
88
- href = _this$props4.href,
89
- renderAfter = _this$props4.renderAfter,
90
- cursor = _this$props4.cursor,
91
- isDisabled = _this$props4.isDisabled;
91
+ const {
92
+ renderIcon,
93
+ renderLabel,
94
+ href,
95
+ renderAfter,
96
+ cursor,
97
+ isDisabled
98
+ } = this.props;
92
99
  const icon = (0, _callRenderProp.callRenderProp)(renderIcon);
93
100
  const label = (0, _callRenderProp.callRenderProp)(renderLabel);
94
101
  const labelIsForScreenReaders = (0, _matchComponentTypes.matchComponentTypes)(label, [_ScreenReaderContent.ScreenReaderContent]);
@@ -106,18 +113,13 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default), _dec
106
113
  position: "relative",
107
114
  borderRadius: "medium",
108
115
  cursor: isDisabled ? 'not-allowed' : cursor,
109
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item,
116
+ css: this.props.styles?.item,
110
117
  "data-cid": "AppNav.Item",
111
118
  children: [icon, labelIsForScreenReaders ? label : (0, _jsxRuntime.jsx)("span", {
112
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
119
+ css: this.props.styles?.label,
113
120
  children: label
114
121
  }), renderAfter && (0, _callRenderProp.callRenderProp)(renderAfter)]
115
122
  });
116
123
  }
117
- }, _Item.displayName = "Item", _Item.componentId = 'AppNav.Item', _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
118
- children: null,
119
- isSelected: false,
120
- cursor: 'pointer',
121
- isDisabled: false
122
- }, _Item)) || _class);
124
+ }) || _class);
123
125
  var _default = exports.default = Item;
package/lib/AppNav/v2/Item/styles.js CHANGED
@@ -39,8 +39,10 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props) => {
42
- const isSelected = props.isSelected,
43
- isDisabled = props.isDisabled;
42
+ const {
43
+ isSelected,
44
+ isDisabled
45
+ } = props;
44
46
  const itemStyles = {
45
47
  appearance: 'none',
46
48
  overflow: 'visible',
package/lib/AppNav/v2/index.js CHANGED
@@ -16,7 +16,7 @@ var _styles = _interopRequireDefault(require("./styles"));
16
16
  var _props = require("./props");
17
17
  var _TruncateList = require("@instructure/ui-truncate-list/lib/TruncateList");
18
18
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
19
- var _dec, _class, _AppNav;
19
+ var _dec, _class;
20
20
  /*
21
21
  * The MIT License (MIT)
22
22
  *
@@ -45,29 +45,37 @@ var _dec, _class, _AppNav;
45
45
  category: components
46
46
  ---
47
47
  **/
48
- let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_AppNav = class AppNav extends _react.Component {
49
- constructor(...args) {
50
- super(...args);
51
- this.state = {
52
- isMeasuring: false
53
- };
54
- this.ref = null;
55
- this.handleRef = el => {
56
- const elementRef = this.props.elementRef;
57
- this.ref = el;
58
- if (typeof elementRef === 'function') {
59
- elementRef(el);
60
- }
61
- };
62
- }
48
+ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class AppNav extends _react.Component {
49
+ static displayName = "AppNav";
50
+ static componentId = 'AppNav';
51
+ static allowedProps = _props.allowedProps;
52
+ static defaultProps = {
53
+ children: null,
54
+ debounce: 300,
55
+ margin: '0',
56
+ renderTruncateLabel: () => 'More',
57
+ visibleItemsCount: 0
58
+ };
59
+ static Item = _Item.Item;
60
+ state = {
61
+ isMeasuring: false
62
+ };
63
+ ref = null;
63
64
  componentDidMount() {
64
- var _this$props$makeStyle, _this$props;
65
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
65
+ this.props.makeStyles?.();
66
66
  }
67
67
  componentDidUpdate() {
68
- var _this$props$makeStyle2, _this$props2;
69
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
68
+ this.props.makeStyles?.();
70
69
  }
70
+ handleRef = el => {
71
+ const {
72
+ elementRef
73
+ } = this.props;
74
+ this.ref = el;
75
+ if (typeof elementRef === 'function') {
76
+ elementRef(el);
77
+ }
78
+ };
71
79
  renderMenu(items) {
72
80
  return (0, _jsxRuntime.jsx)(_latest2.Menu, {
73
81
  trigger: (0, _jsxRuntime.jsx)(AppNav.Item, {
@@ -75,20 +83,21 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default),
75
83
  }),
76
84
  children: items.map((item, index) => {
77
85
  return (0, _jsxRuntime.jsx)(_latest2.Menu.Item, {
78
- href: item.props.href ? item.props.href : void 0,
79
- onClick: item.props.onClick && !item.props.href ? item.props.onClick : void 0,
86
+ href: item.props.href ? item.props.href : undefined,
87
+ onClick: item.props.onClick && !item.props.href ? item.props.onClick : undefined,
80
88
  children: (0, _callRenderProp.callRenderProp)(item.props.renderLabel)
81
89
  }, index);
82
90
  })
83
91
  });
84
92
  }
85
93
  render() {
86
- const _this$props3 = this.props,
87
- visibleItemsCount = _this$props3.visibleItemsCount,
88
- screenReaderLabel = _this$props3.screenReaderLabel,
89
- margin = _this$props3.margin,
90
- debounce = _this$props3.debounce,
91
- styles = _this$props3.styles;
94
+ const {
95
+ visibleItemsCount,
96
+ screenReaderLabel,
97
+ margin,
98
+ debounce,
99
+ styles
100
+ } = this.props;
92
101
  const passthroughProps = _latest.View.omitViewProps((0, _omitProps.omitProps)(this.props, AppNav.allowedProps), AppNav);
93
102
  const renderBeforeItems = (0, _callRenderProp.callRenderProp)(this.props.renderBeforeItems);
94
103
  const renderAfterItems = (0, _callRenderProp.callRenderProp)(this.props.renderAfterItems);
@@ -96,7 +105,7 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default),
96
105
  return (0, _jsxRuntime.jsxs)(_latest.View, {
97
106
  ...passthroughProps,
98
107
  as: "nav",
99
- css: [styles === null || styles === void 0 ? void 0 : styles.appNav, hasRenderedContent ? styles === null || styles === void 0 ? void 0 : styles.alignCenter : ''],
108
+ css: [styles?.appNav, hasRenderedContent ? styles?.alignCenter : ''],
100
109
  margin: margin,
101
110
  display: hasRenderedContent ? 'flex' : 'block',
102
111
  elementRef: this.handleRef,
@@ -108,9 +117,9 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default),
108
117
  debounce: debounce,
109
118
  onUpdate: this.props.onUpdate,
110
119
  renderHiddenItemMenu: hiddenChildren => this.renderMenu(hiddenChildren),
111
- itemSpacing: styles === null || styles === void 0 ? void 0 : styles.horizontalMargin,
112
- fixMenuTriggerWidth: styles === null || styles === void 0 ? void 0 : styles.menuTriggerWidth,
113
- css: styles === null || styles === void 0 ? void 0 : styles.list,
120
+ itemSpacing: styles?.horizontalMargin,
121
+ fixMenuTriggerWidth: styles?.menuTriggerWidth,
122
+ css: styles?.list,
114
123
  "aria-label": (0, _callRenderProp.callRenderProp)(screenReaderLabel),
115
124
  children: this.props.children
116
125
  }), renderAfterItems && (0, _jsxRuntime.jsx)("span", {
@@ -118,11 +127,5 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default),
118
127
  })]
119
128
  });
120
129
  }
121
- }, _AppNav.displayName = "AppNav", _AppNav.componentId = 'AppNav', _AppNav.allowedProps = _props.allowedProps, _AppNav.defaultProps = {
122
- children: null,
123
- debounce: 300,
124
- margin: '0',
125
- renderTruncateLabel: () => 'More',
126
- visibleItemsCount: 0
127
- }, _AppNav.Item = _Item.Item, _AppNav)) || _class);
130
+ }) || _class);
128
131
  var _default = exports.default = AppNav;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-navigation",
3
- "version": "11.7.3-snapshot-7",
3
+ "version": "11.7.3-snapshot-26",
4
4
  "description": "Main and application level navigational components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -14,34 +14,34 @@
14
14
  "bugs": "https://github.com/instructure/instructure-ui/issues",
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
- "@babel/runtime": "^7.27.6",
18
- "@instructure/console": "11.7.3-snapshot-7",
19
- "@instructure/debounce": "11.7.3-snapshot-7",
20
- "@instructure/emotion": "11.7.3-snapshot-7",
21
- "@instructure/shared-types": "11.7.3-snapshot-7",
22
- "@instructure/ui-a11y-content": "11.7.3-snapshot-7",
23
- "@instructure/ui-a11y-utils": "11.7.3-snapshot-7",
24
- "@instructure/ui-badge": "11.7.3-snapshot-7",
25
- "@instructure/ui-dom-utils": "11.7.3-snapshot-7",
26
- "@instructure/ui-focusable": "11.7.3-snapshot-7",
27
- "@instructure/ui-icons": "11.7.3-snapshot-7",
28
- "@instructure/ui-menu": "11.7.3-snapshot-7",
29
- "@instructure/ui-react-utils": "11.7.3-snapshot-7",
30
- "@instructure/ui-tooltip": "11.7.3-snapshot-7",
31
- "@instructure/ui-truncate-list": "11.7.3-snapshot-7",
32
- "@instructure/ui-themes": "11.7.3-snapshot-7",
33
- "@instructure/ui-utils": "11.7.3-snapshot-7",
34
- "@instructure/ui-view": "11.7.3-snapshot-7"
17
+ "@babel/runtime": "^7.29.2",
18
+ "@instructure/console": "11.7.3-snapshot-26",
19
+ "@instructure/emotion": "11.7.3-snapshot-26",
20
+ "@instructure/shared-types": "11.7.3-snapshot-26",
21
+ "@instructure/debounce": "11.7.3-snapshot-26",
22
+ "@instructure/ui-a11y-content": "11.7.3-snapshot-26",
23
+ "@instructure/ui-a11y-utils": "11.7.3-snapshot-26",
24
+ "@instructure/ui-badge": "11.7.3-snapshot-26",
25
+ "@instructure/ui-dom-utils": "11.7.3-snapshot-26",
26
+ "@instructure/ui-focusable": "11.7.3-snapshot-26",
27
+ "@instructure/ui-icons": "11.7.3-snapshot-26",
28
+ "@instructure/ui-react-utils": "11.7.3-snapshot-26",
29
+ "@instructure/ui-themes": "11.7.3-snapshot-26",
30
+ "@instructure/ui-menu": "11.7.3-snapshot-26",
31
+ "@instructure/ui-truncate-list": "11.7.3-snapshot-26",
32
+ "@instructure/ui-utils": "11.7.3-snapshot-26",
33
+ "@instructure/ui-tooltip": "11.7.3-snapshot-26",
34
+ "@instructure/ui-view": "11.7.3-snapshot-26"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@testing-library/jest-dom": "^6.6.3",
38
38
  "@testing-library/react": "15.0.7",
39
39
  "@testing-library/user-event": "^14.6.1",
40
40
  "vitest": "^3.2.2",
41
- "@instructure/ui-axe-check": "11.7.3-snapshot-7",
42
- "@instructure/ui-color-utils": "11.7.3-snapshot-7",
43
- "@instructure/ui-babel-preset": "11.7.3-snapshot-7",
44
- "@instructure/ui-scripts": "11.7.3-snapshot-7"
41
+ "@instructure/ui-axe-check": "11.7.3-snapshot-26",
42
+ "@instructure/ui-babel-preset": "11.7.3-snapshot-26",
43
+ "@instructure/ui-scripts": "11.7.3-snapshot-26",
44
+ "@instructure/ui-color-utils": "11.7.3-snapshot-26"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": ">=18 <=19"