@instructure/ui-pages 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/Pages/Page/__new-tests__/Page.test.js +11 -5
  3. package/es/Pages/Page/index.js +14 -10
  4. package/es/Pages/__new-tests__/Pages.test.js +63 -29
  5. package/es/Pages/index.js +16 -14
  6. package/lib/Pages/Page/__new-tests__/Page.test.js +12 -7
  7. package/lib/Pages/Page/index.js +14 -11
  8. package/lib/Pages/__new-tests__/Pages.test.js +66 -32
  9. package/lib/Pages/index.js +15 -14
  10. package/package.json +13 -13
  11. package/src/Pages/Page/__new-tests__/Page.test.tsx +0 -1
  12. package/src/Pages/Page/index.tsx +1 -1
  13. package/src/Pages/__new-tests__/Pages.test.tsx +0 -1
  14. package/src/Pages/index.tsx +3 -4
  15. package/tsconfig.build.tsbuildinfo +1 -1
  16. package/types/Pages/Page/__new-tests__/Page.test.d.ts.map +1 -1
  17. package/types/Pages/Page/index.d.ts +2 -2
  18. package/types/Pages/Page/index.d.ts.map +1 -1
  19. package/types/Pages/__new-tests__/Pages.test.d.ts.map +1 -1
  20. package/types/Pages/index.d.ts +3 -5
  21. package/types/Pages/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-pages
9
9
 
package/es/Pages/Page/__new-tests__/Page.test.js CHANGED
@@ -23,11 +23,11 @@ var _div;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render } from '@testing-library/react';
28
27
  import { vi, expect } from 'vitest';
29
28
  import '@testing-library/jest-dom';
30
29
  import { Page } from '../index';
30
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
31
31
  describe('<Page />', () => {
32
32
  let consoleErrorMock;
33
33
  beforeEach(() => {
@@ -38,10 +38,16 @@ describe('<Page />', () => {
38
38
  consoleErrorMock.mockRestore();
39
39
  });
40
40
  it('should render with a function as child', async () => {
41
- const _render = render(/*#__PURE__*/React.createElement(Page, null, () => {
42
- return _div || (_div = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
43
- type: "text"
44
- }), /*#__PURE__*/React.createElement("span", null, "Hello World")));
41
+ const _render = render(_jsx(Page, {
42
+ children: () => {
43
+ return _div || (_div = _jsxs("div", {
44
+ children: [_jsx("input", {
45
+ type: "text"
46
+ }), _jsx("span", {
47
+ children: "Hello World"
48
+ })]
49
+ }));
50
+ }
45
51
  })),
46
52
  container = _render.container;
47
53
  expect(container).toHaveTextContent('Hello World');
package/es/Pages/Page/index.js CHANGED
@@ -24,13 +24,14 @@ const _excluded = ["children"];
24
24
  * SOFTWARE.
25
25
  */
26
26
 
27
- import React, { Component } from 'react';
27
+ import { Component } from 'react';
28
28
  import PropTypes from 'prop-types';
29
29
  import { findDOMNode, findTabbable } from '@instructure/ui-dom-utils';
30
30
  import { logError as error } from '@instructure/console';
31
31
  import { View } from '@instructure/ui-view';
32
32
  import { PagesContext } from '../PagesContext';
33
33
  import { allowedProps, propTypes } from './props';
34
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
34
35
  /**
35
36
  ---
36
37
  parent: Pages
@@ -77,15 +78,18 @@ class Page extends Component {
77
78
  const _this$props = this.props,
78
79
  children = _this$props.children,
79
80
  props = _objectWithoutProperties(_this$props, _excluded);
80
- return /*#__PURE__*/React.createElement(PagesContext.Consumer, null, ({
81
- history,
82
- navigateToPreviousPage
83
- }) => /*#__PURE__*/React.createElement(View, {
84
- as: "div",
85
- padding: props.padding,
86
- textAlign: props.textAlign,
87
- elementRef: this.handleRef
88
- }, children && typeof children === 'function' ? children(history, navigateToPreviousPage) : children));
81
+ return _jsx(PagesContext.Consumer, {
82
+ children: ({
83
+ history,
84
+ navigateToPreviousPage
85
+ }) => _jsx(View, {
86
+ as: "div",
87
+ padding: props.padding,
88
+ textAlign: props.textAlign,
89
+ elementRef: this.handleRef,
90
+ children: children && typeof children === 'function' ? children(history, navigateToPreviousPage) : children
91
+ })
92
+ });
89
93
  }
90
94
  }
91
95
  Page.displayName = "Page";
package/es/Pages/__new-tests__/Pages.test.js CHANGED
@@ -22,12 +22,12 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react';
26
25
  import { render, waitFor } from '@testing-library/react';
27
26
  import { vi, expect } from 'vitest';
28
27
  import '@testing-library/jest-dom';
29
28
  import userEvent from '@testing-library/user-event';
30
29
  import { Pages, Page } from '../index';
30
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
31
31
  describe('<Pages />', () => {
32
32
  let consoleErrorMock;
33
33
  beforeEach(() => {
@@ -38,42 +38,72 @@ describe('<Pages />', () => {
38
38
  consoleErrorMock.mockRestore();
39
39
  });
40
40
  it('should render', async () => {
41
- const _render = render(/*#__PURE__*/React.createElement(Pages, null, /*#__PURE__*/React.createElement(Page, null, () => 'Foo'), /*#__PURE__*/React.createElement(Page, null, () => 'Bar'))),
41
+ const _render = render(_jsxs(Pages, {
42
+ children: [_jsx(Page, {
43
+ children: () => 'Foo'
44
+ }), _jsx(Page, {
45
+ children: () => 'Bar'
46
+ })]
47
+ })),
42
48
  container = _render.container;
43
49
  const pages = container.querySelector('div[id^="Pages_"]');
44
50
  expect(pages).toBeInTheDocument();
45
51
  });
46
52
  it('should render a Page', async () => {
47
- const _render2 = render(/*#__PURE__*/React.createElement(Pages, null, /*#__PURE__*/React.createElement(Page, null, () => 'Hello World'))),
53
+ const _render2 = render(_jsx(Pages, {
54
+ children: _jsx(Page, {
55
+ children: () => 'Hello World'
56
+ })
57
+ })),
48
58
  container = _render2.container;
49
59
  const pages = container.querySelector('div[id^="Pages_"]');
50
60
  expect(pages).toHaveTextContent('Hello World');
51
61
  });
52
62
  it('should render the 0th Page by default', async () => {
53
- const _render3 = render(/*#__PURE__*/React.createElement(Pages, null, /*#__PURE__*/React.createElement(Page, null, () => 'Foo'), /*#__PURE__*/React.createElement(Page, null, () => 'Bar'))),
63
+ const _render3 = render(_jsxs(Pages, {
64
+ children: [_jsx(Page, {
65
+ children: () => 'Foo'
66
+ }), _jsx(Page, {
67
+ children: () => 'Bar'
68
+ })]
69
+ })),
54
70
  container = _render3.container;
55
71
  const pages = container.querySelector('div[id^="Pages_"]');
56
72
  expect(pages).toHaveTextContent('Foo');
57
73
  });
58
74
  it('should render the active Page', async () => {
59
- const _render4 = render(/*#__PURE__*/React.createElement(Pages, {
75
+ const _render4 = render(_jsxs(Pages, {
60
76
  activePageIndex: 1,
61
- onPageIndexChange: () => {}
62
- }, /*#__PURE__*/React.createElement(Page, null, () => 'Foo'), /*#__PURE__*/React.createElement(Page, null, () => 'Bar'))),
77
+ onPageIndexChange: () => {},
78
+ children: [_jsx(Page, {
79
+ children: () => 'Foo'
80
+ }), _jsx(Page, {
81
+ children: () => 'Bar'
82
+ })]
83
+ })),
63
84
  container = _render4.container;
64
85
  const pages = container.querySelector('div[id^="Pages_"]');
65
86
  expect(pages).toHaveTextContent('Bar');
66
87
  });
67
88
  it('should throw error if onPageIndexChange is not passed together with activePageIndex', async () => {
68
- render(/*#__PURE__*/React.createElement(Pages, {
69
- activePageIndex: 1
70
- }, /*#__PURE__*/React.createElement(Page, null, () => 'Foo'), /*#__PURE__*/React.createElement(Page, null, () => 'Bar')));
89
+ render(_jsxs(Pages, {
90
+ activePageIndex: 1,
91
+ children: [_jsx(Page, {
92
+ children: () => 'Foo'
93
+ }), _jsx(Page, {
94
+ children: () => 'Bar'
95
+ })]
96
+ }));
71
97
  const expectedErrorMessage = "You provided a 'activePageIndex' prop without an 'onPageIndexChange' handler on 'Pages'.";
72
98
  expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
73
99
  });
74
100
  it('should pass history and navigateToPreviousPage to Page', async () => {
75
101
  const pageSpy = vi.fn();
76
- render(/*#__PURE__*/React.createElement(Pages, null, /*#__PURE__*/React.createElement(Page, null, pageSpy)));
102
+ render(_jsx(Pages, {
103
+ children: _jsx(Page, {
104
+ children: pageSpy
105
+ })
106
+ }));
77
107
  await waitFor(() => {
78
108
  const args = pageSpy.mock.calls[0];
79
109
  expect(pageSpy).toHaveBeenCalledTimes(1);
@@ -83,30 +113,34 @@ describe('<Pages />', () => {
83
113
  });
84
114
  it('should fire onPageIndexChange event', async () => {
85
115
  const onPageIndexChange = vi.fn();
86
- const _render5 = render(/*#__PURE__*/React.createElement(Pages, {
116
+ const _render5 = render(_jsxs(Pages, {
87
117
  activePageIndex: 0,
88
- onPageIndexChange: onPageIndexChange
89
- }, /*#__PURE__*/React.createElement(Page, {
90
- key: 0
91
- }, () => 'Foo'), /*#__PURE__*/React.createElement(Page, {
92
- key: 1
93
- }, (_history, navigate) => /*#__PURE__*/React.createElement("button", {
94
- onClick: navigate
95
- }, "Back")))),
118
+ onPageIndexChange: onPageIndexChange,
119
+ children: [_jsx(Page, {
120
+ children: () => 'Foo'
121
+ }, 0), _jsx(Page, {
122
+ children: (_history, navigate) => _jsx("button", {
123
+ onClick: navigate,
124
+ children: "Back"
125
+ })
126
+ }, 1)]
127
+ })),
96
128
  container = _render5.container,
97
129
  rerender = _render5.rerender;
98
130
 
99
131
  // Set prop: activePageIndex
100
- rerender(/*#__PURE__*/React.createElement(Pages, {
132
+ rerender(_jsxs(Pages, {
101
133
  activePageIndex: 1,
102
- onPageIndexChange: onPageIndexChange
103
- }, /*#__PURE__*/React.createElement(Page, {
104
- key: 0
105
- }, () => 'Foo'), /*#__PURE__*/React.createElement(Page, {
106
- key: 1
107
- }, (_history, navigate) => /*#__PURE__*/React.createElement("button", {
108
- onClick: navigate
109
- }, "Back"))));
134
+ onPageIndexChange: onPageIndexChange,
135
+ children: [_jsx(Page, {
136
+ children: () => 'Foo'
137
+ }, 0), _jsx(Page, {
138
+ children: (_history, navigate) => _jsx("button", {
139
+ onClick: navigate,
140
+ children: "Back"
141
+ })
142
+ }, 1)]
143
+ }));
110
144
  const button = container.querySelector('button');
111
145
  userEvent.click(button);
112
146
  await waitFor(() => {
package/es/Pages/index.js CHANGED
@@ -23,18 +23,18 @@ var _dec, _dec2, _class, _Pages;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- /** @jsx jsx */
27
- import React, { Component } from 'react';
26
+ import { Children, Component } from 'react';
28
27
  import { View } from '@instructure/ui-view';
29
28
  import { containsActiveElement, findTabbable } from '@instructure/ui-dom-utils';
30
29
  import { safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
31
30
  import { logError as error } from '@instructure/console';
32
31
  import { Page } from './Page';
33
- import { withStyle, jsx } from '@instructure/emotion';
32
+ import { withStyle } from '@instructure/emotion';
34
33
  import generateStyle from './styles';
35
34
  import generateComponentTheme from './theme';
36
35
  import { PagesContext } from './PagesContext';
37
36
  import { allowedProps, propTypes } from './props';
37
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
38
38
  /**
39
39
  ---
40
40
  category: components
@@ -111,7 +111,7 @@ let Pages = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
111
111
  const _this$props4 = this.props,
112
112
  activePageIndex = _this$props4.activePageIndex,
113
113
  children = _this$props4.children;
114
- const pages = React.Children.toArray(children);
114
+ const pages = Children.toArray(children);
115
115
  const activePage = activePageIndex < pages.length ? pages[activePageIndex] : null;
116
116
  error(!!activePage, '[Pages] Invalid `activePageIndex`.');
117
117
  return activePage ? safeCloneElement(activePage, {
@@ -123,21 +123,23 @@ let Pages = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
123
123
  render() {
124
124
  var _this$props$styles;
125
125
  const activePage = this.activePage;
126
- return activePage ? jsx(PagesContext.Provider, {
126
+ return activePage ? _jsx(PagesContext.Provider, {
127
127
  value: {
128
128
  history: this.state.history,
129
129
  navigateToPreviousPage: () => {
130
130
  this.handleBackButtonClick();
131
131
  }
132
- }
133
- }, jsx(View, {
134
- as: "div",
135
- id: this._contentId,
136
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pages,
137
- margin: this.props.margin,
138
- role: "region",
139
- elementRef: this.handleRef
140
- }, activePage)) : null;
132
+ },
133
+ children: _jsx(View, {
134
+ as: "div",
135
+ id: this._contentId,
136
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pages,
137
+ margin: this.props.margin,
138
+ role: "region",
139
+ elementRef: this.handleRef,
140
+ children: activePage
141
+ })
142
+ }) : null;
141
143
  }
142
144
  }, _Pages.displayName = "Pages", _Pages.componentId = 'Pages', _Pages.allowedProps = allowedProps, _Pages.propTypes = propTypes, _Pages.defaultProps = {
143
145
  activePageIndex: 0
package/lib/Pages/Page/__new-tests__/Page.test.js CHANGED
@@ -1,11 +1,10 @@
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 _index = require("../index");
7
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
8
  var _div;
10
9
  /*
11
10
  * The MIT License (MIT)
@@ -40,10 +39,16 @@ describe('<Page />', () => {
40
39
  consoleErrorMock.mockRestore();
41
40
  });
42
41
  it('should render with a function as child', async () => {
43
- const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Page, null, () => {
44
- return _div || (_div = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
45
- type: "text"
46
- }), /*#__PURE__*/_react.default.createElement("span", null, "Hello World")));
42
+ const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Page, {
43
+ children: () => {
44
+ return _div || (_div = (0, _jsxRuntime.jsxs)("div", {
45
+ children: [(0, _jsxRuntime.jsx)("input", {
46
+ type: "text"
47
+ }), (0, _jsxRuntime.jsx)("span", {
48
+ children: "Hello World"
49
+ })]
50
+ }));
51
+ }
47
52
  })),
48
53
  container = _render.container;
49
54
  (0, _vitest.expect)(container).toHaveTextContent('Hello World');
package/lib/Pages/Page/index.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.Page = void 0;
9
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = _interopRequireWildcard(require("react"));
9
+ var _react = require("react");
11
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
11
  var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
13
12
  var _findTabbable = require("@instructure/ui-dom-utils/lib/findTabbable.js");
@@ -15,6 +14,7 @@ var _console = require("@instructure/console");
15
14
  var _View = require("@instructure/ui-view/lib/View");
16
15
  var _PagesContext = require("../PagesContext");
17
16
  var _props = require("./props");
17
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
18
  const _excluded = ["children"];
19
19
  /*
20
20
  * The MIT License (MIT)
@@ -85,15 +85,18 @@ class Page extends _react.Component {
85
85
  const _this$props = this.props,
86
86
  children = _this$props.children,
87
87
  props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
88
- return /*#__PURE__*/_react.default.createElement(_PagesContext.PagesContext.Consumer, null, ({
89
- history,
90
- navigateToPreviousPage
91
- }) => /*#__PURE__*/_react.default.createElement(_View.View, {
92
- as: "div",
93
- padding: props.padding,
94
- textAlign: props.textAlign,
95
- elementRef: this.handleRef
96
- }, children && typeof children === 'function' ? children(history, navigateToPreviousPage) : children));
88
+ return (0, _jsxRuntime.jsx)(_PagesContext.PagesContext.Consumer, {
89
+ children: ({
90
+ history,
91
+ navigateToPreviousPage
92
+ }) => (0, _jsxRuntime.jsx)(_View.View, {
93
+ as: "div",
94
+ padding: props.padding,
95
+ textAlign: props.textAlign,
96
+ elementRef: this.handleRef,
97
+ children: children && typeof children === 'function' ? children(history, navigateToPreviousPage) : children
98
+ })
99
+ });
97
100
  }
98
101
  }
99
102
  exports.Page = Page;
package/lib/Pages/__new-tests__/Pages.test.js CHANGED
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
4
+ var _react = require("@testing-library/react");
6
5
  var _vitest = require("vitest");
7
6
  require("@testing-library/jest-dom");
8
7
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
9
8
  var _index = require("../index");
9
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
10
10
  /*
11
11
  * The MIT License (MIT)
12
12
  *
@@ -41,43 +41,73 @@ describe('<Pages />', () => {
41
41
  consoleErrorMock.mockRestore();
42
42
  });
43
43
  it('should render', async () => {
44
- const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Pages, null, /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Foo'), /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Bar'))),
44
+ const _render = (0, _react.render)((0, _jsxRuntime.jsxs)(_index.Pages, {
45
+ children: [(0, _jsxRuntime.jsx)(_index.Page, {
46
+ children: () => 'Foo'
47
+ }), (0, _jsxRuntime.jsx)(_index.Page, {
48
+ children: () => 'Bar'
49
+ })]
50
+ })),
45
51
  container = _render.container;
46
52
  const pages = container.querySelector('div[id^="Pages_"]');
47
53
  (0, _vitest.expect)(pages).toBeInTheDocument();
48
54
  });
49
55
  it('should render a Page', async () => {
50
- const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Pages, null, /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Hello World'))),
56
+ const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Pages, {
57
+ children: (0, _jsxRuntime.jsx)(_index.Page, {
58
+ children: () => 'Hello World'
59
+ })
60
+ })),
51
61
  container = _render2.container;
52
62
  const pages = container.querySelector('div[id^="Pages_"]');
53
63
  (0, _vitest.expect)(pages).toHaveTextContent('Hello World');
54
64
  });
55
65
  it('should render the 0th Page by default', async () => {
56
- const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Pages, null, /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Foo'), /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Bar'))),
66
+ const _render3 = (0, _react.render)((0, _jsxRuntime.jsxs)(_index.Pages, {
67
+ children: [(0, _jsxRuntime.jsx)(_index.Page, {
68
+ children: () => 'Foo'
69
+ }), (0, _jsxRuntime.jsx)(_index.Page, {
70
+ children: () => 'Bar'
71
+ })]
72
+ })),
57
73
  container = _render3.container;
58
74
  const pages = container.querySelector('div[id^="Pages_"]');
59
75
  (0, _vitest.expect)(pages).toHaveTextContent('Foo');
60
76
  });
61
77
  it('should render the active Page', async () => {
62
- const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Pages, {
78
+ const _render4 = (0, _react.render)((0, _jsxRuntime.jsxs)(_index.Pages, {
63
79
  activePageIndex: 1,
64
- onPageIndexChange: () => {}
65
- }, /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Foo'), /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Bar'))),
80
+ onPageIndexChange: () => {},
81
+ children: [(0, _jsxRuntime.jsx)(_index.Page, {
82
+ children: () => 'Foo'
83
+ }), (0, _jsxRuntime.jsx)(_index.Page, {
84
+ children: () => 'Bar'
85
+ })]
86
+ })),
66
87
  container = _render4.container;
67
88
  const pages = container.querySelector('div[id^="Pages_"]');
68
89
  (0, _vitest.expect)(pages).toHaveTextContent('Bar');
69
90
  });
70
91
  it('should throw error if onPageIndexChange is not passed together with activePageIndex', async () => {
71
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Pages, {
72
- activePageIndex: 1
73
- }, /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Foo'), /*#__PURE__*/_react.default.createElement(_index.Page, null, () => 'Bar')));
92
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.Pages, {
93
+ activePageIndex: 1,
94
+ children: [(0, _jsxRuntime.jsx)(_index.Page, {
95
+ children: () => 'Foo'
96
+ }), (0, _jsxRuntime.jsx)(_index.Page, {
97
+ children: () => 'Bar'
98
+ })]
99
+ }));
74
100
  const expectedErrorMessage = "You provided a 'activePageIndex' prop without an 'onPageIndexChange' handler on 'Pages'.";
75
101
  (0, _vitest.expect)(consoleErrorMock).toHaveBeenCalledWith(_vitest.expect.any(String), _vitest.expect.any(String), _vitest.expect.stringContaining(expectedErrorMessage), _vitest.expect.any(String));
76
102
  });
77
103
  it('should pass history and navigateToPreviousPage to Page', async () => {
78
104
  const pageSpy = _vitest.vi.fn();
79
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Pages, null, /*#__PURE__*/_react.default.createElement(_index.Page, null, pageSpy)));
80
- await (0, _react2.waitFor)(() => {
105
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Pages, {
106
+ children: (0, _jsxRuntime.jsx)(_index.Page, {
107
+ children: pageSpy
108
+ })
109
+ }));
110
+ await (0, _react.waitFor)(() => {
81
111
  const args = pageSpy.mock.calls[0];
82
112
  (0, _vitest.expect)(pageSpy).toHaveBeenCalledTimes(1);
83
113
  (0, _vitest.expect)(Array.isArray(args[0])).toEqual(true);
@@ -86,33 +116,37 @@ describe('<Pages />', () => {
86
116
  });
87
117
  it('should fire onPageIndexChange event', async () => {
88
118
  const onPageIndexChange = _vitest.vi.fn();
89
- const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Pages, {
119
+ const _render5 = (0, _react.render)((0, _jsxRuntime.jsxs)(_index.Pages, {
90
120
  activePageIndex: 0,
91
- onPageIndexChange: onPageIndexChange
92
- }, /*#__PURE__*/_react.default.createElement(_index.Page, {
93
- key: 0
94
- }, () => 'Foo'), /*#__PURE__*/_react.default.createElement(_index.Page, {
95
- key: 1
96
- }, (_history, navigate) => /*#__PURE__*/_react.default.createElement("button", {
97
- onClick: navigate
98
- }, "Back")))),
121
+ onPageIndexChange: onPageIndexChange,
122
+ children: [(0, _jsxRuntime.jsx)(_index.Page, {
123
+ children: () => 'Foo'
124
+ }, 0), (0, _jsxRuntime.jsx)(_index.Page, {
125
+ children: (_history, navigate) => (0, _jsxRuntime.jsx)("button", {
126
+ onClick: navigate,
127
+ children: "Back"
128
+ })
129
+ }, 1)]
130
+ })),
99
131
  container = _render5.container,
100
132
  rerender = _render5.rerender;
101
133
 
102
134
  // Set prop: activePageIndex
103
- rerender(/*#__PURE__*/_react.default.createElement(_index.Pages, {
135
+ rerender((0, _jsxRuntime.jsxs)(_index.Pages, {
104
136
  activePageIndex: 1,
105
- onPageIndexChange: onPageIndexChange
106
- }, /*#__PURE__*/_react.default.createElement(_index.Page, {
107
- key: 0
108
- }, () => 'Foo'), /*#__PURE__*/_react.default.createElement(_index.Page, {
109
- key: 1
110
- }, (_history, navigate) => /*#__PURE__*/_react.default.createElement("button", {
111
- onClick: navigate
112
- }, "Back"))));
137
+ onPageIndexChange: onPageIndexChange,
138
+ children: [(0, _jsxRuntime.jsx)(_index.Page, {
139
+ children: () => 'Foo'
140
+ }, 0), (0, _jsxRuntime.jsx)(_index.Page, {
141
+ children: (_history, navigate) => (0, _jsxRuntime.jsx)("button", {
142
+ onClick: navigate,
143
+ children: "Back"
144
+ })
145
+ }, 1)]
146
+ }));
113
147
  const button = container.querySelector('button');
114
148
  _userEvent.default.click(button);
115
- await (0, _react2.waitFor)(() => {
149
+ await (0, _react.waitFor)(() => {
116
150
  (0, _vitest.expect)(onPageIndexChange).toHaveBeenCalledTimes(1);
117
151
  (0, _vitest.expect)(onPageIndexChange).toHaveBeenCalledWith(0, 1);
118
152
  });
package/lib/Pages/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
@@ -12,7 +11,7 @@ Object.defineProperty(exports, "Page", {
12
11
  }
13
12
  });
14
13
  exports.default = exports.Pages = void 0;
15
- var _react = _interopRequireWildcard(require("react"));
14
+ var _react = require("react");
16
15
  var _View = require("@instructure/ui-view/lib/View");
17
16
  var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
18
17
  var _findTabbable = require("@instructure/ui-dom-utils/lib/findTabbable.js");
@@ -25,6 +24,7 @@ var _styles = _interopRequireDefault(require("./styles"));
25
24
  var _theme = _interopRequireDefault(require("./theme"));
26
25
  var _PagesContext = require("./PagesContext");
27
26
  var _props = require("./props");
27
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
28
28
  var _dec, _dec2, _class, _Pages;
29
29
  /*
30
30
  * The MIT License (MIT)
@@ -49,7 +49,6 @@ var _dec, _dec2, _class, _Pages;
49
49
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
50
50
  * SOFTWARE.
51
51
  */
52
- /** @jsx jsx */
53
52
  /**
54
53
  ---
55
54
  category: components
@@ -126,7 +125,7 @@ let Pages = exports.Pages = (_dec = (0, _withDeterministicId.withDeterministicId
126
125
  const _this$props4 = this.props,
127
126
  activePageIndex = _this$props4.activePageIndex,
128
127
  children = _this$props4.children;
129
- const pages = _react.default.Children.toArray(children);
128
+ const pages = _react.Children.toArray(children);
130
129
  const activePage = activePageIndex < pages.length ? pages[activePageIndex] : null;
131
130
  (0, _console.logError)(!!activePage, '[Pages] Invalid `activePageIndex`.');
132
131
  return activePage ? (0, _safeCloneElement.safeCloneElement)(activePage, {
@@ -138,21 +137,23 @@ let Pages = exports.Pages = (_dec = (0, _withDeterministicId.withDeterministicId
138
137
  render() {
139
138
  var _this$props$styles;
140
139
  const activePage = this.activePage;
141
- return activePage ? (0, _emotion.jsx)(_PagesContext.PagesContext.Provider, {
140
+ return activePage ? (0, _jsxRuntime.jsx)(_PagesContext.PagesContext.Provider, {
142
141
  value: {
143
142
  history: this.state.history,
144
143
  navigateToPreviousPage: () => {
145
144
  this.handleBackButtonClick();
146
145
  }
147
- }
148
- }, (0, _emotion.jsx)(_View.View, {
149
- as: "div",
150
- id: this._contentId,
151
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pages,
152
- margin: this.props.margin,
153
- role: "region",
154
- elementRef: this.handleRef
155
- }, activePage)) : null;
146
+ },
147
+ children: (0, _jsxRuntime.jsx)(_View.View, {
148
+ as: "div",
149
+ id: this._contentId,
150
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pages,
151
+ margin: this.props.margin,
152
+ role: "region",
153
+ elementRef: this.handleRef,
154
+ children: activePage
155
+ })
156
+ }) : null;
156
157
  }
157
158
  }, _Pages.displayName = "Pages", _Pages.componentId = 'Pages', _Pages.allowedProps = _props.allowedProps, _Pages.propTypes = _props.propTypes, _Pages.defaultProps = {
158
159
  activePageIndex: 0