@instructure/ui-breadcrumb 10.16.0 → 10.16.1-pr-snapshot-1744893671793

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 +8 -0
  2. package/es/Breadcrumb/BreadcrumbLink/__new-tests__/BreadcrumbLink.test.js +30 -19
  3. package/es/Breadcrumb/BreadcrumbLink/index.js +26 -19
  4. package/es/Breadcrumb/__new-tests__/Breadcrumb.test.js +66 -41
  5. package/es/Breadcrumb/index.js +21 -18
  6. package/lib/Breadcrumb/BreadcrumbLink/__new-tests__/BreadcrumbLink.test.js +36 -26
  7. package/lib/Breadcrumb/BreadcrumbLink/index.js +26 -20
  8. package/lib/Breadcrumb/__new-tests__/Breadcrumb.test.js +69 -44
  9. package/lib/Breadcrumb/index.js +20 -18
  10. package/package.json +16 -16
  11. package/src/Breadcrumb/BreadcrumbLink/__new-tests__/BreadcrumbLink.test.tsx +0 -1
  12. package/src/Breadcrumb/BreadcrumbLink/index.tsx +1 -1
  13. package/src/Breadcrumb/__new-tests__/Breadcrumb.test.tsx +1 -2
  14. package/src/Breadcrumb/index.tsx +6 -7
  15. package/tsconfig.build.tsbuildinfo +1 -1
  16. package/types/Breadcrumb/BreadcrumbLink/__new-tests__/BreadcrumbLink.test.d.ts.map +1 -1
  17. package/types/Breadcrumb/BreadcrumbLink/index.d.ts +2 -2
  18. package/types/Breadcrumb/BreadcrumbLink/index.d.ts.map +1 -1
  19. package/types/Breadcrumb/__new-tests__/Breadcrumb.test.d.ts.map +1 -1
  20. package/types/Breadcrumb/index.d.ts +5 -7
  21. package/types/Breadcrumb/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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-pr-snapshot-1744893671793](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-pr-snapshot-1744893671793) (2025-04-17)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-breadcrumb
9
+
10
+
11
+
12
+
13
+
6
14
  # [10.16.0](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.16.0) (2025-04-11)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-breadcrumb
package/es/Breadcrumb/BreadcrumbLink/__new-tests__/BreadcrumbLink.test.js CHANGED
@@ -23,12 +23,12 @@ var _BreadcrumbLink, _BreadcrumbLink2, _BreadcrumbLink3, _BreadcrumbLink4, _Brea
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { fireEvent, 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 { BreadcrumbLink } from '../index';
31
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
32
32
  const TEST_TEXT_01 = 'Account';
33
33
  const TEST_LINK = 'http://instructure-test.com';
34
34
  const TEST_TO = '/example';
@@ -45,42 +45,48 @@ describe('<BreadcrumbLink />', () => {
45
45
  consoleErrorMock.mockRestore();
46
46
  });
47
47
  it('should render an anchor tag when given a href prop', () => {
48
- render(_BreadcrumbLink || (_BreadcrumbLink = /*#__PURE__*/React.createElement(BreadcrumbLink, {
49
- href: TEST_LINK
50
- }, TEST_TEXT_01)));
48
+ render(_BreadcrumbLink || (_BreadcrumbLink = _jsx(BreadcrumbLink, {
49
+ href: TEST_LINK,
50
+ children: TEST_TEXT_01
51
+ })));
51
52
  const anchor = screen.getByRole('link');
52
53
  expect(anchor).toHaveAttribute('href', TEST_LINK);
53
54
  });
54
55
  it('should render as a button and respond to onClick event', () => {
55
56
  const onClick = vi.fn();
56
- render(/*#__PURE__*/React.createElement(BreadcrumbLink, {
57
- onClick: onClick
58
- }, TEST_TEXT_01));
57
+ render(_jsx(BreadcrumbLink, {
58
+ onClick: onClick,
59
+ children: TEST_TEXT_01
60
+ }));
59
61
  const button = screen.getByRole('button');
60
62
  fireEvent.click(button);
61
63
  expect(onClick).toHaveBeenCalledTimes(1);
62
64
  });
63
65
  it('should respond to mouseEnter event when provided with onMouseEnter prop', () => {
64
66
  const onMouseEnter = vi.fn();
65
- render(/*#__PURE__*/React.createElement(BreadcrumbLink, {
67
+ render(_jsx(BreadcrumbLink, {
66
68
  onMouseEnter: onMouseEnter,
67
- href: TEST_LINK
68
- }, TEST_TEXT_01));
69
+ href: TEST_LINK,
70
+ children: TEST_TEXT_01
71
+ }));
69
72
  const link = screen.getByRole('link');
70
73
  fireEvent.mouseEnter(link);
71
74
  expect(onMouseEnter).toHaveBeenCalledTimes(1);
72
75
  });
73
76
  it('should allow to prop to pass through', () => {
74
- const _render = render(_BreadcrumbLink2 || (_BreadcrumbLink2 = /*#__PURE__*/React.createElement(BreadcrumbLink, {
75
- to: TEST_TO
76
- }, TEST_TEXT_01))),
77
+ const _render = render(_BreadcrumbLink2 || (_BreadcrumbLink2 = _jsx(BreadcrumbLink, {
78
+ to: TEST_TO,
79
+ children: TEST_TEXT_01
80
+ }))),
77
81
  container = _render.container;
78
82
  const link = container.querySelector('a');
79
83
  expect(link).toBeInTheDocument();
80
84
  expect(link).toHaveAttribute('to', TEST_TO);
81
85
  });
82
86
  it('should not render a link when not given an href prop', () => {
83
- const _render2 = render(_BreadcrumbLink3 || (_BreadcrumbLink3 = /*#__PURE__*/React.createElement(BreadcrumbLink, null, TEST_TEXT_01))),
87
+ const _render2 = render(_BreadcrumbLink3 || (_BreadcrumbLink3 = _jsx(BreadcrumbLink, {
88
+ children: TEST_TEXT_01
89
+ }))),
84
90
  container = _render2.container;
85
91
  const elementWithHref = container.querySelector('[href]');
86
92
  const anchor = container.querySelector('a');
@@ -91,7 +97,9 @@ describe('<BreadcrumbLink />', () => {
91
97
  expect(span).toHaveTextContent(TEST_TEXT_01);
92
98
  });
93
99
  it('should not render a button when not given an onClick prop', () => {
94
- const _render3 = render(_BreadcrumbLink4 || (_BreadcrumbLink4 = /*#__PURE__*/React.createElement(BreadcrumbLink, null, TEST_TEXT_01))),
100
+ const _render3 = render(_BreadcrumbLink4 || (_BreadcrumbLink4 = _jsx(BreadcrumbLink, {
101
+ children: TEST_TEXT_01
102
+ }))),
95
103
  container = _render3.container;
96
104
  const button = container.querySelector('button');
97
105
  const span = container.querySelector('span');
@@ -100,15 +108,18 @@ describe('<BreadcrumbLink />', () => {
100
108
  expect(span).toHaveTextContent(TEST_TEXT_01);
101
109
  });
102
110
  it('should meet a11y standards as a link', async () => {
103
- const _render4 = render(_BreadcrumbLink5 || (_BreadcrumbLink5 = /*#__PURE__*/React.createElement(BreadcrumbLink, {
104
- href: TEST_LINK
105
- }, TEST_TEXT_01))),
111
+ const _render4 = render(_BreadcrumbLink5 || (_BreadcrumbLink5 = _jsx(BreadcrumbLink, {
112
+ href: TEST_LINK,
113
+ children: TEST_TEXT_01
114
+ }))),
106
115
  container = _render4.container;
107
116
  const axeCheck = await runAxeCheck(container);
108
117
  expect(axeCheck).toBe(true);
109
118
  });
110
119
  it('should meet a11y standards as a span', async () => {
111
- const _render5 = render(_BreadcrumbLink6 || (_BreadcrumbLink6 = /*#__PURE__*/React.createElement(BreadcrumbLink, null, TEST_TEXT_01))),
120
+ const _render5 = render(_BreadcrumbLink6 || (_BreadcrumbLink6 = _jsx(BreadcrumbLink, {
121
+ children: TEST_TEXT_01
122
+ }))),
112
123
  container = _render5.container;
113
124
  const axeCheck = await runAxeCheck(container);
114
125
  expect(axeCheck).toBe(true);
package/es/Breadcrumb/BreadcrumbLink/index.js CHANGED
@@ -23,13 +23,14 @@ var _dec, _class, _BreadcrumbLink;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React, { Component } from 'react';
26
+ import { Component } from 'react';
27
27
  import { TruncateText } from '@instructure/ui-truncate-text';
28
28
  import { Link } from '@instructure/ui-link';
29
29
  import { omitProps } from '@instructure/ui-react-utils';
30
30
  import { testable } from '@instructure/ui-testable';
31
31
  import { Tooltip } from '@instructure/ui-tooltip';
32
32
  import { propTypes, allowedProps } from './props';
33
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
33
34
  /**
34
35
  ---
35
36
  parent: Breadcrumb
@@ -65,25 +66,31 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class
65
66
  isCurrentPage = _this$props.isCurrentPage;
66
67
  const isTruncated = this.state.isTruncated;
67
68
  const props = omitProps(this.props, BreadcrumbLink.allowedProps);
68
- return /*#__PURE__*/React.createElement(Tooltip, {
69
+ return _jsx(Tooltip, {
69
70
  renderTip: children,
70
- preventTooltip: !isTruncated
71
- }, /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
72
- href: href,
73
- renderIcon: renderIcon,
74
- iconPlacement: iconPlacement,
75
- onClick: onClick,
76
- onMouseEnter: onMouseEnter,
77
- isWithinText: false,
78
- elementRef: this.handleRef,
79
- forceButtonRole: false
80
- }, isCurrentPage && {
81
- 'aria-current': 'page'
82
- }), /*#__PURE__*/React.createElement(TruncateText, {
83
- onUpdate: isTruncated => this.handleTruncation(isTruncated)
84
- }, /*#__PURE__*/React.createElement("span", {
85
- "aria-hidden": isTruncated
86
- }, children))));
71
+ preventTooltip: !isTruncated,
72
+ children: _jsx(Link, {
73
+ ...props,
74
+ href: href,
75
+ renderIcon: renderIcon,
76
+ iconPlacement: iconPlacement,
77
+ onClick: onClick,
78
+ onMouseEnter: onMouseEnter,
79
+ isWithinText: false,
80
+ elementRef: this.handleRef,
81
+ forceButtonRole: false,
82
+ ...(isCurrentPage && {
83
+ 'aria-current': 'page'
84
+ }),
85
+ children: _jsx(TruncateText, {
86
+ onUpdate: isTruncated => this.handleTruncation(isTruncated),
87
+ children: _jsx("span", {
88
+ "aria-hidden": isTruncated,
89
+ children: children
90
+ })
91
+ })
92
+ })
93
+ });
87
94
  }
88
95
  }, _BreadcrumbLink.displayName = "BreadcrumbLink", _BreadcrumbLink.componentId = 'Breadcrumb.Link', _BreadcrumbLink.propTypes = propTypes, _BreadcrumbLink.allowedProps = allowedProps, _BreadcrumbLink.defaultProps = {}, _BreadcrumbLink)) || _class);
89
96
  export default BreadcrumbLink;
package/es/Breadcrumb/__new-tests__/Breadcrumb.test.js CHANGED
@@ -23,7 +23,6 @@ var _Breadcrumb, _Breadcrumb2, _Breadcrumb3, _Breadcrumb4, _Breadcrumb5, _Breadc
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';
@@ -33,6 +32,7 @@ import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11y
33
32
  import { runAxeCheck } from '@instructure/ui-axe-check';
34
33
  import { Breadcrumb } from '../index';
35
34
  import BreadcrumbExamples from '../__examples__/Breadcrumb.examples';
35
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
36
36
  const TEST_LABEL = 'You are here:';
37
37
  const TEST_TEXT_01 = 'Account';
38
38
  const TEST_TEXT_02 = 'Settings';
@@ -50,11 +50,15 @@ describe('<Breadcrumb />', () => {
50
50
  consoleErrorMock.mockRestore();
51
51
  });
52
52
  it('should be accessible', async () => {
53
- const _render = render(_Breadcrumb || (_Breadcrumb = /*#__PURE__*/React.createElement(Breadcrumb, {
54
- label: TEST_LABEL
55
- }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
56
- href: TEST_LINK
57
- }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, TEST_TEXT_02)))),
53
+ const _render = render(_Breadcrumb || (_Breadcrumb = _jsxs(Breadcrumb, {
54
+ label: TEST_LABEL,
55
+ children: [_jsx(Breadcrumb.Link, {
56
+ href: TEST_LINK,
57
+ children: TEST_TEXT_01
58
+ }), _jsx(Breadcrumb.Link, {
59
+ children: TEST_TEXT_02
60
+ })]
61
+ }))),
58
62
  container = _render.container;
59
63
  const axeCheck = await runAxeCheck(container);
60
64
  expect(axeCheck).toBe(true);
@@ -71,30 +75,41 @@ describe('<Breadcrumb />', () => {
71
75
  });
72
76
  });
73
77
  it('should render the label as an aria-label attribute', () => {
74
- render(_Breadcrumb2 || (_Breadcrumb2 = /*#__PURE__*/React.createElement(Breadcrumb, {
75
- label: TEST_LABEL
76
- }, /*#__PURE__*/React.createElement(Breadcrumb.Link, null, TEST_TEXT_01))));
78
+ render(_Breadcrumb2 || (_Breadcrumb2 = _jsx(Breadcrumb, {
79
+ label: TEST_LABEL,
80
+ children: _jsx(Breadcrumb.Link, {
81
+ children: TEST_TEXT_01
82
+ })
83
+ })));
77
84
  const label = screen.getByLabelText(TEST_LABEL);
78
85
  expect(label).toBeInTheDocument();
79
86
  expect(label).toHaveAttribute('aria-label', TEST_LABEL);
80
87
  });
81
88
  it('should render an icon as a separator', () => {
82
- const _render3 = render(_Breadcrumb3 || (_Breadcrumb3 = /*#__PURE__*/React.createElement(Breadcrumb, {
83
- label: TEST_LABEL
84
- }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
85
- href: TEST_LINK
86
- }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, TEST_TEXT_02)))),
89
+ const _render3 = render(_Breadcrumb3 || (_Breadcrumb3 = _jsxs(Breadcrumb, {
90
+ label: TEST_LABEL,
91
+ children: [_jsx(Breadcrumb.Link, {
92
+ href: TEST_LINK,
93
+ children: TEST_TEXT_01
94
+ }), _jsx(Breadcrumb.Link, {
95
+ children: TEST_TEXT_02
96
+ })]
97
+ }))),
87
98
  container = _render3.container;
88
99
  const icon = container.querySelector('svg');
89
100
  expect(icon).toBeInTheDocument();
90
101
  expect(icon).toHaveAttribute('aria-hidden', 'true');
91
102
  });
92
103
  it('should add aria-current="page" to the last element by default', () => {
93
- const _render4 = render(_Breadcrumb4 || (_Breadcrumb4 = /*#__PURE__*/React.createElement(Breadcrumb, {
94
- label: TEST_LABEL
95
- }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
96
- href: TEST_LINK
97
- }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, TEST_TEXT_02)))),
104
+ const _render4 = render(_Breadcrumb4 || (_Breadcrumb4 = _jsxs(Breadcrumb, {
105
+ label: TEST_LABEL,
106
+ children: [_jsx(Breadcrumb.Link, {
107
+ href: TEST_LINK,
108
+ children: TEST_TEXT_01
109
+ }), _jsx(Breadcrumb.Link, {
110
+ children: TEST_TEXT_02
111
+ })]
112
+ }))),
98
113
  container = _render4.container;
99
114
  const links = container.querySelectorAll('[class$="--block-link"]');
100
115
  const firstLink = links[0];
@@ -103,12 +118,16 @@ describe('<Breadcrumb />', () => {
103
118
  expect(lastLink).toHaveAttribute('aria-current', 'page');
104
119
  });
105
120
  it('should add aria-current="page" to the element if isCurrent is true', () => {
106
- const _render5 = render(_Breadcrumb5 || (_Breadcrumb5 = /*#__PURE__*/React.createElement(Breadcrumb, {
107
- label: TEST_LABEL
108
- }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
109
- isCurrentPage: true,
110
- href: TEST_LINK
111
- }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, TEST_TEXT_02)))),
121
+ const _render5 = render(_Breadcrumb5 || (_Breadcrumb5 = _jsxs(Breadcrumb, {
122
+ label: TEST_LABEL,
123
+ children: [_jsx(Breadcrumb.Link, {
124
+ isCurrentPage: true,
125
+ href: TEST_LINK,
126
+ children: TEST_TEXT_01
127
+ }), _jsx(Breadcrumb.Link, {
128
+ children: TEST_TEXT_02
129
+ })]
130
+ }))),
112
131
  container = _render5.container;
113
132
  const links = container.querySelectorAll('[class$="--block-link"]');
114
133
  const firstLink = links[0];
@@ -116,25 +135,31 @@ describe('<Breadcrumb />', () => {
116
135
  expect(firstLink).toHaveAttribute('aria-current', 'page');
117
136
  expect(lastLink).not.toHaveAttribute('aria-current', 'page');
118
137
  });
119
- it('should throw a warning when multiple elements have isCurrent set to true ', () => {
120
- render(_Breadcrumb6 || (_Breadcrumb6 = /*#__PURE__*/React.createElement(Breadcrumb, {
121
- label: TEST_LABEL
122
- }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
123
- isCurrentPage: true,
124
- href: TEST_LINK
125
- }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, {
126
- isCurrentPage: true
127
- }, TEST_TEXT_02))));
138
+ it('should throw a warning when multiple elements have isCurrent set to true', () => {
139
+ render(_Breadcrumb6 || (_Breadcrumb6 = _jsxs(Breadcrumb, {
140
+ label: TEST_LABEL,
141
+ children: [_jsx(Breadcrumb.Link, {
142
+ isCurrentPage: true,
143
+ href: TEST_LINK,
144
+ children: TEST_TEXT_01
145
+ }), _jsx(Breadcrumb.Link, {
146
+ isCurrentPage: true,
147
+ children: TEST_TEXT_02
148
+ })]
149
+ })));
128
150
  expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining('Warning: Multiple elements with isCurrentPage=true found. Only one element should be set to current.'));
129
151
  });
130
152
  it('should not add aria-current="page" to the last element if it set to false', () => {
131
- const _render6 = render(_Breadcrumb7 || (_Breadcrumb7 = /*#__PURE__*/React.createElement(Breadcrumb, {
132
- label: TEST_LABEL
133
- }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
134
- href: TEST_LINK
135
- }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, {
136
- isCurrentPage: false
137
- }, TEST_TEXT_02)))),
153
+ const _render6 = render(_Breadcrumb7 || (_Breadcrumb7 = _jsxs(Breadcrumb, {
154
+ label: TEST_LABEL,
155
+ children: [_jsx(Breadcrumb.Link, {
156
+ href: TEST_LINK,
157
+ children: TEST_TEXT_01
158
+ }), _jsx(Breadcrumb.Link, {
159
+ isCurrentPage: false,
160
+ children: TEST_TEXT_02
161
+ })]
162
+ }))),
138
163
  container = _render6.container;
139
164
  const links = container.querySelectorAll('[class$="--block-link"]');
140
165
  const firstLink = links[0];
package/es/Breadcrumb/index.js CHANGED
@@ -23,16 +23,16 @@ var _dec, _dec2, _class, _Breadcrumb;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- /** @jsx jsx */
27
- import React, { Component } from 'react';
26
+ import { isValidElement, cloneElement, Children, Component } from 'react';
28
27
  import { View } from '@instructure/ui-view';
29
28
  import { testable } from '@instructure/ui-testable';
30
- import { withStyle, jsx } from '@instructure/emotion';
29
+ import { withStyle } from '@instructure/emotion';
31
30
  import { IconArrowOpenEndSolid } from '@instructure/ui-icons';
32
31
  import { BreadcrumbLink } from './BreadcrumbLink';
33
32
  import generateStyle from './styles';
34
33
  import generateComponentTheme from './theme';
35
34
  import { propTypes, allowedProps } from './props';
35
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
36
36
  /**
37
37
  ---
38
38
  category: components
@@ -46,7 +46,7 @@ let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
46
46
  this.ref = el;
47
47
  };
48
48
  this.addAriaCurrent = child => {
49
- const updatedChild = /*#__PURE__*/React.cloneElement(child, {
49
+ const updatedChild = /*#__PURE__*/cloneElement(child, {
50
50
  'aria-current': 'page'
51
51
  });
52
52
  return updatedChild;
@@ -64,40 +64,43 @@ let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
64
64
  const _this$props3 = this.props,
65
65
  styles = _this$props3.styles,
66
66
  children = _this$props3.children;
67
- const numChildren = React.Children.count(children);
67
+ const numChildren = Children.count(children);
68
68
  const inlineStyle = {
69
69
  maxWidth: `${Math.floor(100 / numChildren)}%`
70
70
  };
71
71
  let isAriaCurrentSet = false;
72
- return React.Children.map(children, (child, index) => {
72
+ return Children.map(children, (child, index) => {
73
73
  const isLastElement = index === numChildren - 1;
74
- if (/*#__PURE__*/React.isValidElement(child)) {
74
+ if (/*#__PURE__*/isValidElement(child)) {
75
75
  const isCurrentPage = child.props.isCurrentPage || false;
76
76
  if (isAriaCurrentSet && isCurrentPage) {}
77
77
  if (isCurrentPage) {
78
78
  isAriaCurrentSet = true;
79
79
  }
80
80
  }
81
- return jsx("li", {
81
+ return _jsxs("li", {
82
82
  css: styles === null || styles === void 0 ? void 0 : styles.crumb,
83
- style: inlineStyle
84
- }, !isAriaCurrentSet && isLastElement && child.props.isCurrentPage !== false ? this.addAriaCurrent(child) : child, index < numChildren - 1 && jsx(IconArrowOpenEndSolid, {
85
- color: "auto",
86
- css: styles === null || styles === void 0 ? void 0 : styles.separator
87
- }));
83
+ style: inlineStyle,
84
+ children: [!isAriaCurrentSet && isLastElement && child.props.isCurrentPage !== false ? this.addAriaCurrent(child) : child, index < numChildren - 1 && _jsx(IconArrowOpenEndSolid, {
85
+ color: "auto",
86
+ css: styles === null || styles === void 0 ? void 0 : styles.separator
87
+ })]
88
+ });
88
89
  });
89
90
  }
90
91
  render() {
91
92
  const styles = this.props.styles;
92
- return jsx(View, {
93
+ return _jsx(View, {
93
94
  role: "navigation",
94
95
  as: "div",
95
96
  margin: this.props.margin,
96
97
  "aria-label": this.props.label,
97
- elementRef: this.handleRef
98
- }, jsx("ol", {
99
- css: styles === null || styles === void 0 ? void 0 : styles.breadcrumb
100
- }, this.renderChildren()));
98
+ elementRef: this.handleRef,
99
+ children: _jsx("ol", {
100
+ css: styles === null || styles === void 0 ? void 0 : styles.breadcrumb,
101
+ children: this.renderChildren()
102
+ })
103
+ });
101
104
  }
102
105
  }, _Breadcrumb.displayName = "Breadcrumb", _Breadcrumb.componentId = 'Breadcrumb', _Breadcrumb.propTypes = propTypes, _Breadcrumb.allowedProps = allowedProps, _Breadcrumb.defaultProps = {
103
106
  size: 'medium',
package/lib/Breadcrumb/BreadcrumbLink/__new-tests__/BreadcrumbLink.test.js CHANGED
@@ -1,12 +1,11 @@
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 _index = require("../index");
8
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
10
9
  var _BreadcrumbLink, _BreadcrumbLink2, _BreadcrumbLink3, _BreadcrumbLink4, _BreadcrumbLink5, _BreadcrumbLink6;
11
10
  /*
12
11
  * The MIT License (MIT)
@@ -47,42 +46,48 @@ describe('<BreadcrumbLink />', () => {
47
46
  consoleErrorMock.mockRestore();
48
47
  });
49
48
  it('should render an anchor tag when given a href prop', () => {
50
- (0, _react2.render)(_BreadcrumbLink || (_BreadcrumbLink = /*#__PURE__*/_react.default.createElement(_index.BreadcrumbLink, {
51
- href: TEST_LINK
52
- }, TEST_TEXT_01)));
53
- const anchor = _react2.screen.getByRole('link');
49
+ (0, _react.render)(_BreadcrumbLink || (_BreadcrumbLink = (0, _jsxRuntime.jsx)(_index.BreadcrumbLink, {
50
+ href: TEST_LINK,
51
+ children: TEST_TEXT_01
52
+ })));
53
+ const anchor = _react.screen.getByRole('link');
54
54
  expect(anchor).toHaveAttribute('href', TEST_LINK);
55
55
  });
56
56
  it('should render as a button and respond to onClick event', () => {
57
57
  const onClick = _vitest.vi.fn();
58
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BreadcrumbLink, {
59
- onClick: onClick
60
- }, TEST_TEXT_01));
61
- const button = _react2.screen.getByRole('button');
62
- _react2.fireEvent.click(button);
58
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.BreadcrumbLink, {
59
+ onClick: onClick,
60
+ children: TEST_TEXT_01
61
+ }));
62
+ const button = _react.screen.getByRole('button');
63
+ _react.fireEvent.click(button);
63
64
  expect(onClick).toHaveBeenCalledTimes(1);
64
65
  });
65
66
  it('should respond to mouseEnter event when provided with onMouseEnter prop', () => {
66
67
  const onMouseEnter = _vitest.vi.fn();
67
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BreadcrumbLink, {
68
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.BreadcrumbLink, {
68
69
  onMouseEnter: onMouseEnter,
69
- href: TEST_LINK
70
- }, TEST_TEXT_01));
71
- const link = _react2.screen.getByRole('link');
72
- _react2.fireEvent.mouseEnter(link);
70
+ href: TEST_LINK,
71
+ children: TEST_TEXT_01
72
+ }));
73
+ const link = _react.screen.getByRole('link');
74
+ _react.fireEvent.mouseEnter(link);
73
75
  expect(onMouseEnter).toHaveBeenCalledTimes(1);
74
76
  });
75
77
  it('should allow to prop to pass through', () => {
76
- const _render = (0, _react2.render)(_BreadcrumbLink2 || (_BreadcrumbLink2 = /*#__PURE__*/_react.default.createElement(_index.BreadcrumbLink, {
77
- to: TEST_TO
78
- }, TEST_TEXT_01))),
78
+ const _render = (0, _react.render)(_BreadcrumbLink2 || (_BreadcrumbLink2 = (0, _jsxRuntime.jsx)(_index.BreadcrumbLink, {
79
+ to: TEST_TO,
80
+ children: TEST_TEXT_01
81
+ }))),
79
82
  container = _render.container;
80
83
  const link = container.querySelector('a');
81
84
  expect(link).toBeInTheDocument();
82
85
  expect(link).toHaveAttribute('to', TEST_TO);
83
86
  });
84
87
  it('should not render a link when not given an href prop', () => {
85
- const _render2 = (0, _react2.render)(_BreadcrumbLink3 || (_BreadcrumbLink3 = /*#__PURE__*/_react.default.createElement(_index.BreadcrumbLink, null, TEST_TEXT_01))),
88
+ const _render2 = (0, _react.render)(_BreadcrumbLink3 || (_BreadcrumbLink3 = (0, _jsxRuntime.jsx)(_index.BreadcrumbLink, {
89
+ children: TEST_TEXT_01
90
+ }))),
86
91
  container = _render2.container;
87
92
  const elementWithHref = container.querySelector('[href]');
88
93
  const anchor = container.querySelector('a');
@@ -93,7 +98,9 @@ describe('<BreadcrumbLink />', () => {
93
98
  expect(span).toHaveTextContent(TEST_TEXT_01);
94
99
  });
95
100
  it('should not render a button when not given an onClick prop', () => {
96
- const _render3 = (0, _react2.render)(_BreadcrumbLink4 || (_BreadcrumbLink4 = /*#__PURE__*/_react.default.createElement(_index.BreadcrumbLink, null, TEST_TEXT_01))),
101
+ const _render3 = (0, _react.render)(_BreadcrumbLink4 || (_BreadcrumbLink4 = (0, _jsxRuntime.jsx)(_index.BreadcrumbLink, {
102
+ children: TEST_TEXT_01
103
+ }))),
97
104
  container = _render3.container;
98
105
  const button = container.querySelector('button');
99
106
  const span = container.querySelector('span');
@@ -102,15 +109,18 @@ describe('<BreadcrumbLink />', () => {
102
109
  expect(span).toHaveTextContent(TEST_TEXT_01);
103
110
  });
104
111
  it('should meet a11y standards as a link', async () => {
105
- const _render4 = (0, _react2.render)(_BreadcrumbLink5 || (_BreadcrumbLink5 = /*#__PURE__*/_react.default.createElement(_index.BreadcrumbLink, {
106
- href: TEST_LINK
107
- }, TEST_TEXT_01))),
112
+ const _render4 = (0, _react.render)(_BreadcrumbLink5 || (_BreadcrumbLink5 = (0, _jsxRuntime.jsx)(_index.BreadcrumbLink, {
113
+ href: TEST_LINK,
114
+ children: TEST_TEXT_01
115
+ }))),
108
116
  container = _render4.container;
109
117
  const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
110
118
  expect(axeCheck).toBe(true);
111
119
  });
112
120
  it('should meet a11y standards as a span', async () => {
113
- const _render5 = (0, _react2.render)(_BreadcrumbLink6 || (_BreadcrumbLink6 = /*#__PURE__*/_react.default.createElement(_index.BreadcrumbLink, null, TEST_TEXT_01))),
121
+ const _render5 = (0, _react.render)(_BreadcrumbLink6 || (_BreadcrumbLink6 = (0, _jsxRuntime.jsx)(_index.BreadcrumbLink, {
122
+ children: TEST_TEXT_01
123
+ }))),
114
124
  container = _render5.container;
115
125
  const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
116
126
  expect(axeCheck).toBe(true);
package/lib/Breadcrumb/BreadcrumbLink/index.js CHANGED
@@ -1,17 +1,17 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = exports.BreadcrumbLink = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
7
+ var _react = require("react");
9
8
  var _TruncateText = require("@instructure/ui-truncate-text/lib/TruncateText");
10
9
  var _Link = require("@instructure/ui-link/lib/Link");
11
10
  var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
12
11
  var _testable = require("@instructure/ui-testable/lib/testable.js");
13
12
  var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
14
13
  var _props = require("./props");
14
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
15
15
  var _dec, _class, _BreadcrumbLink;
16
16
  /*
17
17
  * The MIT License (MIT)
@@ -71,25 +71,31 @@ let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(),
71
71
  isCurrentPage = _this$props.isCurrentPage;
72
72
  const isTruncated = this.state.isTruncated;
73
73
  const props = (0, _omitProps.omitProps)(this.props, BreadcrumbLink.allowedProps);
74
- return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
74
+ return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
75
75
  renderTip: children,
76
- preventTooltip: !isTruncated
77
- }, /*#__PURE__*/_react.default.createElement(_Link.Link, Object.assign({}, props, {
78
- href: href,
79
- renderIcon: renderIcon,
80
- iconPlacement: iconPlacement,
81
- onClick: onClick,
82
- onMouseEnter: onMouseEnter,
83
- isWithinText: false,
84
- elementRef: this.handleRef,
85
- forceButtonRole: false
86
- }, isCurrentPage && {
87
- 'aria-current': 'page'
88
- }), /*#__PURE__*/_react.default.createElement(_TruncateText.TruncateText, {
89
- onUpdate: isTruncated => this.handleTruncation(isTruncated)
90
- }, /*#__PURE__*/_react.default.createElement("span", {
91
- "aria-hidden": isTruncated
92
- }, children))));
76
+ preventTooltip: !isTruncated,
77
+ children: (0, _jsxRuntime.jsx)(_Link.Link, {
78
+ ...props,
79
+ href: href,
80
+ renderIcon: renderIcon,
81
+ iconPlacement: iconPlacement,
82
+ onClick: onClick,
83
+ onMouseEnter: onMouseEnter,
84
+ isWithinText: false,
85
+ elementRef: this.handleRef,
86
+ forceButtonRole: false,
87
+ ...(isCurrentPage && {
88
+ 'aria-current': 'page'
89
+ }),
90
+ children: (0, _jsxRuntime.jsx)(_TruncateText.TruncateText, {
91
+ onUpdate: isTruncated => this.handleTruncation(isTruncated),
92
+ children: (0, _jsxRuntime.jsx)("span", {
93
+ "aria-hidden": isTruncated,
94
+ children: children
95
+ })
96
+ })
97
+ })
98
+ });
93
99
  }
94
100
  }, _BreadcrumbLink.displayName = "BreadcrumbLink", _BreadcrumbLink.componentId = 'Breadcrumb.Link', _BreadcrumbLink.propTypes = _props.propTypes, _BreadcrumbLink.allowedProps = _props.allowedProps, _BreadcrumbLink.defaultProps = {}, _BreadcrumbLink)) || _class);
95
101
  var _default = exports.default = BreadcrumbLink;