@instructure/ui-side-nav-bar 10.16.1-snapshot-0 → 10.16.1

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 (21) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.js +5 -5
  3. package/es/SideNavBar/SideNavBarItem/index.js +18 -12
  4. package/es/SideNavBar/__new-tests__/SideNavBar.test.js +72 -61
  5. package/es/SideNavBar/index.js +25 -19
  6. package/lib/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.js +7 -8
  7. package/lib/SideNavBar/SideNavBarItem/index.js +16 -11
  8. package/lib/SideNavBar/__new-tests__/SideNavBar.test.js +84 -73
  9. package/lib/SideNavBar/index.js +24 -19
  10. package/package.json +17 -17
  11. package/src/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.tsx +0 -1
  12. package/src/SideNavBar/SideNavBarItem/index.tsx +2 -2
  13. package/src/SideNavBar/__new-tests__/SideNavBar.test.tsx +0 -1
  14. package/src/SideNavBar/index.tsx +2 -3
  15. package/tsconfig.build.tsbuildinfo +1 -1
  16. package/types/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.d.ts.map +1 -1
  17. package/types/SideNavBar/SideNavBarItem/index.d.ts +2 -4
  18. package/types/SideNavBar/SideNavBarItem/index.d.ts.map +1 -1
  19. package/types/SideNavBar/__new-tests__/SideNavBar.test.d.ts.map +1 -1
  20. package/types/SideNavBar/index.d.ts +3 -5
  21. package/types/SideNavBar/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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
- ## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
6
+ ## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-side-nav-bar
9
9
 
package/es/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.js CHANGED
@@ -23,13 +23,13 @@ var _SideNavBarItem, _SideNavBarItem2;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render, screen } from '@testing-library/react';
28
27
  import { vi } from 'vitest';
29
28
  import '@testing-library/jest-dom';
30
29
  import { runAxeCheck } from '@instructure/ui-axe-check';
31
30
  import { IconAdminLine } from '@instructure/ui-icons';
32
31
  import { SideNavBarItem } from '../index';
32
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
33
33
  describe('<SideNavBarItem />', () => {
34
34
  let consoleErrorMock;
35
35
  beforeEach(() => {
@@ -40,8 +40,8 @@ describe('<SideNavBarItem />', () => {
40
40
  consoleErrorMock.mockRestore();
41
41
  });
42
42
  it('should render', async () => {
43
- const _render = render(_SideNavBarItem || (_SideNavBarItem = /*#__PURE__*/React.createElement(SideNavBarItem, {
44
- icon: /*#__PURE__*/React.createElement(IconAdminLine, null),
43
+ const _render = render(_SideNavBarItem || (_SideNavBarItem = _jsx(SideNavBarItem, {
44
+ icon: _jsx(IconAdminLine, {}),
45
45
  label: "Admin",
46
46
  href: "#"
47
47
  }))),
@@ -56,8 +56,8 @@ describe('<SideNavBarItem />', () => {
56
56
  expect(navItem).toHaveTextContent('Admin');
57
57
  });
58
58
  it('should meet a11y standards', async () => {
59
- const _render2 = render(_SideNavBarItem2 || (_SideNavBarItem2 = /*#__PURE__*/React.createElement(SideNavBarItem, {
60
- icon: /*#__PURE__*/React.createElement(IconAdminLine, null),
59
+ const _render2 = render(_SideNavBarItem2 || (_SideNavBarItem2 = _jsx(SideNavBarItem, {
60
+ icon: _jsx(IconAdminLine, {}),
61
61
  label: "Dashboard",
62
62
  href: "#"
63
63
  }))),
package/es/SideNavBar/SideNavBarItem/index.js CHANGED
@@ -22,13 +22,13 @@ var _dec, _dec2, _class, _SideNavBarItem;
22
22
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
23
  * SOFTWARE.
24
24
  */
25
- /** @jsx jsx */
25
+
26
26
  import { Component } from 'react';
27
27
  import { testable } from '@instructure/ui-testable';
28
28
  import { omitProps, getElementType } from '@instructure/ui-react-utils';
29
29
  import { Tooltip } from '@instructure/ui-tooltip';
30
30
  import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
31
- import { withStyle, jsx } from '@instructure/emotion';
31
+ import { withStyle } from '@instructure/emotion';
32
32
  import generateStyle from './styles';
33
33
  import generateComponentTheme from './theme';
34
34
  import { allowedProps, propTypes } from './props';
@@ -39,6 +39,7 @@ parent: SideNavBar
39
39
  id: SideNavBar.Item
40
40
  ---
41
41
  **/
42
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
43
  let SideNavBarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_SideNavBarItem = class SideNavBarItem extends Component {
43
44
  constructor(...args) {
44
45
  super(...args);
@@ -72,17 +73,21 @@ let SideNavBarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
72
73
  icon = _this$props3.icon,
73
74
  label = _this$props3.label;
74
75
  const props = omitProps(this.props, SideNavBarItem.allowedProps);
75
- return jsx(ElementType, Object.assign({}, props, {
76
+ return _jsxs(ElementType, {
77
+ ...props,
76
78
  href: href,
77
79
  onClick: onClick,
78
80
  ref: addRef ? this.handleRef : void 0,
79
81
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
80
- "aria-label": this.props.minimized ? label : void 0
81
- }), jsx("div", {
82
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
83
- }, icon), !this.props.minimized ? jsx("div", {
84
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label
85
- }, label) : null);
82
+ "aria-label": this.props.minimized ? label : void 0,
83
+ children: [_jsx("div", {
84
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
85
+ children: icon
86
+ }), !this.props.minimized ? _jsx("div", {
87
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label,
88
+ children: label
89
+ }) : null]
90
+ });
86
91
  }
87
92
  render() {
88
93
  const _this$props4 = this.props,
@@ -90,11 +95,12 @@ let SideNavBarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
90
95
  label = _this$props4.label;
91
96
  const hasTooltip = minimized && hasVisibleChildren(label);
92
97
  const link = this.renderLink(!hasTooltip);
93
- return hasTooltip ? jsx(Tooltip, {
98
+ return hasTooltip ? _jsx(Tooltip, {
94
99
  renderTip: label,
95
100
  placement: "end",
96
- elementRef: this.handleRef
97
- }, link) : link;
101
+ elementRef: this.handleRef,
102
+ children: link
103
+ }) : link;
98
104
  }
99
105
  }, _SideNavBarItem.displayName = "SideNavBarItem", _SideNavBarItem.componentId = 'SideNavBar.Item', _SideNavBarItem.allowedProps = allowedProps, _SideNavBarItem.propTypes = propTypes, _SideNavBarItem.defaultProps = {
100
106
  as: 'a',
package/es/SideNavBar/__new-tests__/SideNavBar.test.js CHANGED
@@ -23,7 +23,6 @@ var _SideNavBarItem, _div, _SideNavBarItem2, _SideNavBarItem3, _SideNavBarItem4,
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render, screen, waitFor } from '@testing-library/react';
28
27
  import userEvent from '@testing-library/user-event';
29
28
  import { vi } from 'vitest';
@@ -32,6 +31,7 @@ import { Badge } from '@instructure/ui-badge';
32
31
  import { IconAdminLine, IconDashboardLine } from '@instructure/ui-icons';
33
32
  import { runAxeCheck } from '@instructure/ui-axe-check';
34
33
  import { SideNavBar, SideNavBarItem } from '../index';
34
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
35
35
  describe('<SideNavBar />', () => {
36
36
  let consoleErrorMock;
37
37
  beforeEach(() => {
@@ -42,17 +42,18 @@ describe('<SideNavBar />', () => {
42
42
  consoleErrorMock.mockRestore();
43
43
  });
44
44
  it('should render', async () => {
45
- const _render = render(/*#__PURE__*/React.createElement(SideNavBar, {
45
+ const _render = render(_jsx(SideNavBar, {
46
46
  label: "Main navigation",
47
47
  toggleLabel: {
48
48
  expandedLabel: 'Minimize SideNavBar',
49
49
  minimizedLabel: 'Expand SideNavBar'
50
- }
51
- }, _SideNavBarItem || (_SideNavBarItem = /*#__PURE__*/React.createElement(SideNavBarItem, {
52
- icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
53
- label: "Dashboard",
54
- href: "#"
55
- })))),
50
+ },
51
+ children: _SideNavBarItem || (_SideNavBarItem = _jsx(SideNavBarItem, {
52
+ icon: _jsx(IconDashboardLine, {}),
53
+ label: "Dashboard",
54
+ href: "#"
55
+ }))
56
+ })),
56
57
  container = _render.container;
57
58
  const nav = screen.getByRole('navigation');
58
59
  const icons = container.querySelectorAll('svg');
@@ -65,33 +66,37 @@ describe('<SideNavBar />', () => {
65
66
  expect(nav).toHaveTextContent('Minimize SideNavBar');
66
67
  });
67
68
  it('should not crash with valid React elements', async () => {
68
- render(/*#__PURE__*/React.createElement(SideNavBar, {
69
+ render(_jsxs(SideNavBar, {
69
70
  label: "Main navigation",
70
71
  toggleLabel: {
71
72
  expandedLabel: 'Minimize SideNavBar',
72
73
  minimizedLabel: 'Expand SideNavBar'
73
- }
74
- }, false, _div || (_div = /*#__PURE__*/React.createElement("div", null, "test123")), _SideNavBarItem2 || (_SideNavBarItem2 = /*#__PURE__*/React.createElement(SideNavBarItem, {
75
- icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
76
- label: "Dashboard",
77
- href: "#"
78
- }))));
74
+ },
75
+ children: [false, _div || (_div = _jsx("div", {
76
+ children: "test123"
77
+ })), _SideNavBarItem2 || (_SideNavBarItem2 = _jsx(SideNavBarItem, {
78
+ icon: _jsx(IconDashboardLine, {}),
79
+ label: "Dashboard",
80
+ href: "#"
81
+ }))]
82
+ }));
79
83
  const navElements = screen.getAllByRole('listitem');
80
84
  expect(navElements[0]).toHaveTextContent('test123');
81
85
  expect(navElements[1]).toHaveTextContent('Dashboard');
82
86
  });
83
87
  it('should render a single semantic nav element', async () => {
84
- render(/*#__PURE__*/React.createElement(SideNavBar, {
88
+ render(_jsx(SideNavBar, {
85
89
  label: "Main navigation",
86
90
  toggleLabel: {
87
91
  expandedLabel: 'Minimize SideNavBar',
88
92
  minimizedLabel: 'Expand SideNavBar'
89
- }
90
- }, _SideNavBarItem3 || (_SideNavBarItem3 = /*#__PURE__*/React.createElement(SideNavBarItem, {
91
- icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
92
- label: "Dashboard",
93
- href: "#"
94
- }))));
93
+ },
94
+ children: _SideNavBarItem3 || (_SideNavBarItem3 = _jsx(SideNavBarItem, {
95
+ icon: _jsx(IconDashboardLine, {}),
96
+ label: "Dashboard",
97
+ href: "#"
98
+ }))
99
+ }));
95
100
  const nav = screen.getByRole('navigation');
96
101
  const navElements = screen.getAllByRole('listitem');
97
102
  expect(nav).toBeInTheDocument();
@@ -100,23 +105,25 @@ describe('<SideNavBar />', () => {
100
105
  expect(navElements[0]).toHaveTextContent('Dashboard');
101
106
  });
102
107
  it('should render a semantic list for the nav content', async () => {
103
- render(/*#__PURE__*/React.createElement(SideNavBar, {
108
+ render(_jsxs(SideNavBar, {
104
109
  label: "Main navigation",
105
110
  toggleLabel: {
106
111
  expandedLabel: 'Minimize SideNavBar',
107
112
  minimizedLabel: 'Expand SideNavBar'
108
- }
109
- }, _SideNavBarItem4 || (_SideNavBarItem4 = /*#__PURE__*/React.createElement(SideNavBarItem, {
110
- icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
111
- label: "Dashboard",
112
- href: "#"
113
- })), _SideNavBarItem5 || (_SideNavBarItem5 = /*#__PURE__*/React.createElement(SideNavBarItem, {
114
- icon: /*#__PURE__*/React.createElement(Badge, {
115
- count: 99
116
- }, /*#__PURE__*/React.createElement(IconAdminLine, null)),
117
- label: "Inbox",
118
- href: "#"
119
- }))));
113
+ },
114
+ children: [_SideNavBarItem4 || (_SideNavBarItem4 = _jsx(SideNavBarItem, {
115
+ icon: _jsx(IconDashboardLine, {}),
116
+ label: "Dashboard",
117
+ href: "#"
118
+ })), _SideNavBarItem5 || (_SideNavBarItem5 = _jsx(SideNavBarItem, {
119
+ icon: _jsx(Badge, {
120
+ count: 99,
121
+ children: _jsx(IconAdminLine, {})
122
+ }),
123
+ label: "Inbox",
124
+ href: "#"
125
+ }))]
126
+ }));
120
127
  const list = screen.getAllByRole('list');
121
128
  const navElements = screen.getAllByRole('listitem');
122
129
  expect(list[0].tagName).toBe('UL');
@@ -124,23 +131,25 @@ describe('<SideNavBar />', () => {
124
131
  expect(navElements.length).toBe(2);
125
132
  });
126
133
  it('should switch aria-expanded when the Toggle SideNavBar button is clicked', async () => {
127
- render(/*#__PURE__*/React.createElement(SideNavBar, {
134
+ render(_jsxs(SideNavBar, {
128
135
  label: "Main navigation",
129
136
  toggleLabel: {
130
137
  expandedLabel: 'Minimize SideNavBar',
131
138
  minimizedLabel: 'Expand SideNavBar'
132
- }
133
- }, _SideNavBarItem6 || (_SideNavBarItem6 = /*#__PURE__*/React.createElement(SideNavBarItem, {
134
- icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
135
- label: "Dashboard",
136
- href: "#"
137
- })), _SideNavBarItem7 || (_SideNavBarItem7 = /*#__PURE__*/React.createElement(SideNavBarItem, {
138
- icon: /*#__PURE__*/React.createElement(Badge, {
139
- count: 99
140
- }, /*#__PURE__*/React.createElement(IconAdminLine, null)),
141
- label: "Inbox",
142
- href: "#"
143
- }))));
139
+ },
140
+ children: [_SideNavBarItem6 || (_SideNavBarItem6 = _jsx(SideNavBarItem, {
141
+ icon: _jsx(IconDashboardLine, {}),
142
+ label: "Dashboard",
143
+ href: "#"
144
+ })), _SideNavBarItem7 || (_SideNavBarItem7 = _jsx(SideNavBarItem, {
145
+ icon: _jsx(Badge, {
146
+ count: 99,
147
+ children: _jsx(IconAdminLine, {})
148
+ }),
149
+ label: "Inbox",
150
+ href: "#"
151
+ }))]
152
+ }));
144
153
  const nav = screen.getByRole('navigation');
145
154
  const toggleBtn = screen.getByRole('button');
146
155
  expect(nav).toHaveTextContent('Minimize SideNavBar');
@@ -154,23 +163,25 @@ describe('<SideNavBar />', () => {
154
163
  });
155
164
  });
156
165
  it('should meet a11y standards', async () => {
157
- const _render2 = render(/*#__PURE__*/React.createElement(SideNavBar, {
166
+ const _render2 = render(_jsxs(SideNavBar, {
158
167
  label: "Main navigation",
159
168
  toggleLabel: {
160
169
  expandedLabel: 'Minimize SideNavBar',
161
170
  minimizedLabel: 'Expand SideNavBar'
162
- }
163
- }, _SideNavBarItem8 || (_SideNavBarItem8 = /*#__PURE__*/React.createElement(SideNavBarItem, {
164
- icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
165
- label: "Dashboard",
166
- href: "#"
167
- })), _SideNavBarItem9 || (_SideNavBarItem9 = /*#__PURE__*/React.createElement(SideNavBarItem, {
168
- icon: /*#__PURE__*/React.createElement(Badge, {
169
- count: 99
170
- }, /*#__PURE__*/React.createElement(IconAdminLine, null)),
171
- label: "Inbox",
172
- href: "#"
173
- })))),
171
+ },
172
+ children: [_SideNavBarItem8 || (_SideNavBarItem8 = _jsx(SideNavBarItem, {
173
+ icon: _jsx(IconDashboardLine, {}),
174
+ label: "Dashboard",
175
+ href: "#"
176
+ })), _SideNavBarItem9 || (_SideNavBarItem9 = _jsx(SideNavBarItem, {
177
+ icon: _jsx(Badge, {
178
+ count: 99,
179
+ children: _jsx(IconAdminLine, {})
180
+ }),
181
+ label: "Inbox",
182
+ href: "#"
183
+ }))]
184
+ })),
174
185
  container = _render2.container;
175
186
  const axeCheck = await runAxeCheck(container);
176
187
  expect(axeCheck).toBe(true);
package/es/SideNavBar/index.js CHANGED
@@ -22,17 +22,17 @@ var _dec, _dec2, _class, _SideNavBar;
22
22
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
23
  * SOFTWARE.
24
24
  */
25
- /** @jsx jsx */
26
- import React, { Component, Children, isValidElement } from 'react';
25
+ import { Component, Children, isValidElement } from 'react';
27
26
  import { testable } from '@instructure/ui-testable';
28
27
  import { omitProps, safeCloneElement } from '@instructure/ui-react-utils';
29
28
  import { IconMoveStartLine } from '@instructure/ui-icons';
30
29
  import { ScreenReaderContent } from '@instructure/ui-a11y-content';
31
- import { withStyle, jsx } from '@instructure/emotion';
30
+ import { withStyle } from '@instructure/emotion';
32
31
  import { SideNavBarItem } from './SideNavBarItem';
33
32
  import generateStyle from './styles';
34
33
  import generateComponentTheme from './theme';
35
34
  import { allowedProps, propTypes } from './props';
35
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
36
36
  const navMinimized = ({
37
37
  minimized
38
38
  }) => ({
@@ -88,9 +88,10 @@ let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
88
88
  const navItem = safeCloneElement(child, {
89
89
  minimized: this.state.minimized
90
90
  });
91
- return jsx("li", {
92
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list
93
- }, navItem);
91
+ return _jsx("li", {
92
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list,
93
+ children: navItem
94
+ });
94
95
  });
95
96
  }
96
97
  toggleMessage() {
@@ -100,23 +101,28 @@ let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
100
101
  var _this$props$styles2, _this$props$styles3, _this$props$styles4;
101
102
  const label = this.props.label;
102
103
  const props = omitProps(this.props, SideNavBar.allowedProps, ['minimized']);
103
- return jsx("nav", Object.assign({}, props, {
104
+ return _jsxs("nav", {
105
+ ...props,
104
106
  css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
105
107
  "aria-label": label,
106
108
  ref: element => {
107
109
  this.ref = element;
108
- }
109
- }), jsx("ul", {
110
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content
111
- }, this.renderChildren()), jsx(SideNavBarItem, {
112
- "aria-expanded": !this.minimized,
113
- onClick: this.handleNavToggle,
114
- icon: jsx(IconMoveStartLine, {
115
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggleIcon,
116
- inline: false
117
- }),
118
- label: jsx(ScreenReaderContent, null, this.toggleMessage())
119
- }));
110
+ },
111
+ children: [_jsx("ul", {
112
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content,
113
+ children: this.renderChildren()
114
+ }), _jsx(SideNavBarItem, {
115
+ "aria-expanded": !this.minimized,
116
+ onClick: this.handleNavToggle,
117
+ icon: _jsx(IconMoveStartLine, {
118
+ css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggleIcon,
119
+ inline: false
120
+ }),
121
+ label: _jsx(ScreenReaderContent, {
122
+ children: this.toggleMessage()
123
+ })
124
+ })]
125
+ });
120
126
  }
121
127
  }, _SideNavBar.displayName = "SideNavBar", _SideNavBar.componentId = 'SideNavBar', _SideNavBar.allowedProps = allowedProps, _SideNavBar.propTypes = propTypes, _SideNavBar.defaultProps = {
122
128
  children: null,
package/lib/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  var _vitest = require("vitest");
7
5
  require("@testing-library/jest-dom");
8
6
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
9
7
  var _IconAdminLine = require("@instructure/ui-icons/lib/IconAdminLine.js");
10
8
  var _index = require("../index");
9
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
11
10
  var _SideNavBarItem, _SideNavBarItem2;
12
11
  /*
13
12
  * The MIT License (MIT)
@@ -42,13 +41,13 @@ describe('<SideNavBarItem />', () => {
42
41
  consoleErrorMock.mockRestore();
43
42
  });
44
43
  it('should render', async () => {
45
- const _render = (0, _react2.render)(_SideNavBarItem || (_SideNavBarItem = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
46
- icon: /*#__PURE__*/_react.default.createElement(_IconAdminLine.IconAdminLine, null),
44
+ const _render = (0, _react.render)(_SideNavBarItem || (_SideNavBarItem = (0, _jsxRuntime.jsx)(_index.SideNavBarItem, {
45
+ icon: (0, _jsxRuntime.jsx)(_IconAdminLine.IconAdminLine, {}),
47
46
  label: "Admin",
48
47
  href: "#"
49
48
  }))),
50
49
  container = _render.container;
51
- const navItem = _react2.screen.getByRole('link');
50
+ const navItem = _react.screen.getByRole('link');
52
51
  const icon = container.querySelector('svg');
53
52
  expect(icon).toBeInTheDocument();
54
53
  expect(icon).toHaveAttribute('name', 'IconAdmin');
@@ -58,8 +57,8 @@ describe('<SideNavBarItem />', () => {
58
57
  expect(navItem).toHaveTextContent('Admin');
59
58
  });
60
59
  it('should meet a11y standards', async () => {
61
- const _render2 = (0, _react2.render)(_SideNavBarItem2 || (_SideNavBarItem2 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
62
- icon: /*#__PURE__*/_react.default.createElement(_IconAdminLine.IconAdminLine, null),
60
+ const _render2 = (0, _react.render)(_SideNavBarItem2 || (_SideNavBarItem2 = (0, _jsxRuntime.jsx)(_index.SideNavBarItem, {
61
+ icon: (0, _jsxRuntime.jsx)(_IconAdminLine.IconAdminLine, {}),
63
62
  label: "Dashboard",
64
63
  href: "#"
65
64
  }))),
package/lib/SideNavBar/SideNavBarItem/index.js CHANGED
@@ -15,6 +15,7 @@ var _emotion = require("@instructure/emotion");
15
15
  var _styles = _interopRequireDefault(require("./styles"));
16
16
  var _theme = _interopRequireDefault(require("./theme"));
17
17
  var _props = require("./props");
18
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
19
  var _dec, _dec2, _class, _SideNavBarItem;
19
20
  /*
20
21
  * The MIT License (MIT)
@@ -39,7 +40,6 @@ var _dec, _dec2, _class, _SideNavBarItem;
39
40
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
40
41
  * SOFTWARE.
41
42
  */
42
- /** @jsx jsx */
43
43
  /**
44
44
  ---
45
45
  parent: SideNavBar
@@ -79,17 +79,21 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_s
79
79
  icon = _this$props3.icon,
80
80
  label = _this$props3.label;
81
81
  const props = (0, _omitProps.omitProps)(this.props, SideNavBarItem.allowedProps);
82
- return (0, _emotion.jsx)(ElementType, Object.assign({}, props, {
82
+ return (0, _jsxRuntime.jsxs)(ElementType, {
83
+ ...props,
83
84
  href: href,
84
85
  onClick: onClick,
85
86
  ref: addRef ? this.handleRef : void 0,
86
87
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
87
- "aria-label": this.props.minimized ? label : void 0
88
- }), (0, _emotion.jsx)("div", {
89
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
90
- }, icon), !this.props.minimized ? (0, _emotion.jsx)("div", {
91
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label
92
- }, label) : null);
88
+ "aria-label": this.props.minimized ? label : void 0,
89
+ children: [(0, _jsxRuntime.jsx)("div", {
90
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
91
+ children: icon
92
+ }), !this.props.minimized ? (0, _jsxRuntime.jsx)("div", {
93
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label,
94
+ children: label
95
+ }) : null]
96
+ });
93
97
  }
94
98
  render() {
95
99
  const _this$props4 = this.props,
@@ -97,11 +101,12 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_s
97
101
  label = _this$props4.label;
98
102
  const hasTooltip = minimized && (0, _hasVisibleChildren.hasVisibleChildren)(label);
99
103
  const link = this.renderLink(!hasTooltip);
100
- return hasTooltip ? (0, _emotion.jsx)(_Tooltip.Tooltip, {
104
+ return hasTooltip ? (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
101
105
  renderTip: label,
102
106
  placement: "end",
103
- elementRef: this.handleRef
104
- }, link) : link;
107
+ elementRef: this.handleRef,
108
+ children: link
109
+ }) : link;
105
110
  }
106
111
  }, _SideNavBarItem.displayName = "SideNavBarItem", _SideNavBarItem.componentId = 'SideNavBar.Item', _SideNavBarItem.allowedProps = _props.allowedProps, _SideNavBarItem.propTypes = _props.propTypes, _SideNavBarItem.defaultProps = {
107
112
  as: 'a',