@instructure/ui-flex 10.16.1-snapshot-0 → 10.16.1-snapshot-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 (25) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Flex/Item/__new-tests__/FlexItem.test.js +13 -8
  3. package/es/Flex/Item/index.js +7 -5
  4. package/es/Flex/__examples__/Flex.examples.js +33 -33
  5. package/es/Flex/__new-tests__/Flex.test.js +139 -53
  6. package/es/Flex/index.js +8 -6
  7. package/lib/Flex/Item/__new-tests__/FlexItem.test.js +15 -11
  8. package/lib/Flex/Item/index.js +6 -4
  9. package/lib/Flex/__examples__/Flex.examples.js +33 -34
  10. package/lib/Flex/__new-tests__/Flex.test.js +149 -64
  11. package/lib/Flex/index.js +7 -6
  12. package/package.json +10 -10
  13. package/src/Flex/Item/__new-tests__/FlexItem.test.tsx +2 -3
  14. package/src/Flex/Item/index.tsx +1 -2
  15. package/src/Flex/__examples__/Flex.examples.tsx +0 -2
  16. package/src/Flex/__new-tests__/Flex.test.tsx +14 -13
  17. package/src/Flex/index.tsx +5 -7
  18. package/tsconfig.build.tsbuildinfo +1 -1
  19. package/types/Flex/Item/__new-tests__/FlexItem.test.d.ts.map +1 -1
  20. package/types/Flex/Item/index.d.ts +1 -3
  21. package/types/Flex/Item/index.d.ts.map +1 -1
  22. package/types/Flex/__examples__/Flex.examples.d.ts.map +1 -1
  23. package/types/Flex/__new-tests__/Flex.test.d.ts.map +1 -1
  24. package/types/Flex/index.d.ts +3 -5
  25. package/types/Flex/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-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-flex
9
9
 
package/es/Flex/Item/__new-tests__/FlexItem.test.js CHANGED
@@ -23,33 +23,38 @@ var _Item, _Item2;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render, waitFor } 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 { Item } from '../index';
31
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
32
32
  describe('<Item />', () => {
33
33
  it('should render children', async () => {
34
- const _render = render(_Item || (_Item = /*#__PURE__*/React.createElement(Item, null, "Flex item 1"))),
34
+ const _render = render(_Item || (_Item = _jsx(Item, {
35
+ children: "Flex item 1"
36
+ }))),
35
37
  container = _render.container;
36
- const item = container.querySelector('[class$="-flexItem"]');
38
+ const item = container.querySelector('[class*="-flexItem"]');
37
39
  expect(item).toBeInTheDocument();
38
40
  expect(item).toHaveTextContent('Flex item 1');
39
41
  });
40
42
  it('should support an elementRef prop', async () => {
41
43
  const elementRef = vi.fn();
42
- const _render2 = render(/*#__PURE__*/React.createElement(Item, {
43
- elementRef: elementRef
44
- }, "Flex item 2")),
44
+ const _render2 = render(_jsx(Item, {
45
+ elementRef: elementRef,
46
+ children: "Flex item 2"
47
+ })),
45
48
  container = _render2.container;
46
- const item = container.querySelector('[class$="-flexItem"]');
49
+ const item = container.querySelector('[class*="-flexItem"]');
47
50
  await waitFor(() => {
48
51
  expect(elementRef).toHaveBeenCalledWith(item);
49
52
  });
50
53
  });
51
54
  it('should meet a11y standards', async () => {
52
- const _render3 = render(_Item2 || (_Item2 = /*#__PURE__*/React.createElement(Item, null, "Flex item 3"))),
55
+ const _render3 = render(_Item2 || (_Item2 = _jsx(Item, {
56
+ children: "Flex item 3"
57
+ }))),
53
58
  container = _render3.container;
54
59
  const axeCheck = await runAxeCheck(container);
55
60
  expect(axeCheck).toBe(true);
package/es/Flex/Item/index.js CHANGED
@@ -23,13 +23,13 @@ var _dec, _class, _Item;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- /** @jsx jsx */
27
26
  import { Component } from 'react';
28
27
  import { omitProps } from '@instructure/ui-react-utils';
29
28
  import { View } from '@instructure/ui-view';
30
- import { withStyle, jsx } from '@instructure/emotion';
29
+ import { withStyle } from '@instructure/emotion';
31
30
  import generateStyle from './styles';
32
31
  import { propTypes, allowedProps } from './props';
32
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
33
33
  /**
34
34
  ---
35
35
  parent: Flex
@@ -72,7 +72,8 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class
72
72
  styles = _this$props3.styles;
73
73
  const dirColumn = direction === 'column';
74
74
  const dirRow = direction === 'row';
75
- return jsx(View, Object.assign({}, props, {
75
+ return _jsx(View, {
76
+ ...props,
76
77
  css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
77
78
  elementRef: this.handleRef,
78
79
  as: as,
@@ -83,8 +84,9 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class
83
84
  padding: padding,
84
85
  overflowX: overflowX,
85
86
  overflowY: overflowY || (dirColumn ? 'auto' : 'visible'),
86
- withVisualDebug: withVisualDebug
87
- }), children);
87
+ withVisualDebug: withVisualDebug,
88
+ children: children
89
+ });
88
90
  }
89
91
  }, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.propTypes = propTypes, _Item.allowedProps = allowedProps, _Item.defaultProps = {
90
92
  as: 'span',
package/es/Flex/__examples__/Flex.examples.js CHANGED
@@ -22,49 +22,49 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react';
26
25
  import { Flex } from '../index';
27
- const regular = [/*#__PURE__*/React.createElement(Flex.Item, {
28
- key: "0"
29
- }, "One"), /*#__PURE__*/React.createElement(Flex.Item, {
30
- key: "1"
31
- }, "Two"), /*#__PURE__*/React.createElement(Flex.Item, {
32
- key: "2"
33
- }, "Three"), /*#__PURE__*/React.createElement(Flex.Item, {
34
- key: "3"
35
- }, "Four")];
36
- const shrink = [/*#__PURE__*/React.createElement(Flex.Item, {
37
- key: "0",
26
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
27
+ const regular = [_jsx(Flex.Item, {
28
+ children: "One"
29
+ }, "0"), _jsx(Flex.Item, {
30
+ children: "Two"
31
+ }, "1"), _jsx(Flex.Item, {
32
+ children: "Three"
33
+ }, "2"), _jsx(Flex.Item, {
34
+ children: "Four"
35
+ }, "3")];
36
+ const shrink = [_jsx(Flex.Item, {
38
37
  padding: "x-small",
39
- shouldShrink: true
40
- }, "Villum dolore eu fugiat nulla pariatur."), /*#__PURE__*/React.createElement(Flex.Item, {
41
- key: "1",
38
+ shouldShrink: true,
39
+ children: "Villum dolore eu fugiat nulla pariatur."
40
+ }, "0"), _jsx(Flex.Item, {
42
41
  padding: "x-small",
43
- shouldShrink: true
44
- }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."), /*#__PURE__*/React.createElement(Flex.Item, {
45
- key: "2",
42
+ shouldShrink: true,
43
+ children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
44
+ }, "1"), _jsx(Flex.Item, {
46
45
  padding: "x-small",
47
- shouldShrink: true
48
- }, "Duis aute irure."), /*#__PURE__*/React.createElement(Flex.Item, {
49
- key: "3",
46
+ shouldShrink: true,
47
+ children: "Duis aute irure."
48
+ }, "2"), _jsx(Flex.Item, {
50
49
  padding: "x-small",
51
- shouldShrink: true
52
- }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")];
53
- const grow = [/*#__PURE__*/React.createElement(Flex.Item, {
54
- key: "0",
50
+ shouldShrink: true,
51
+ children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
52
+ }, "3")];
53
+ const grow = [_jsx(Flex.Item, {
55
54
  padding: "x-small",
56
- size: "200px"
57
- }, "I am always 200px."), /*#__PURE__*/React.createElement(Flex.Item, {
58
- key: "1",
55
+ size: "200px",
56
+ children: "I am always 200px."
57
+ }, "0"), _jsx(Flex.Item, {
59
58
  padding: "x-small",
60
59
  shouldShrink: true,
61
60
  shouldGrow: true,
62
- size: "200px"
63
- }, "I can grow, and shrink down to 200px."), /*#__PURE__*/React.createElement(Flex.Item, {
64
- key: "2",
61
+ size: "200px",
62
+ children: "I can grow, and shrink down to 200px."
63
+ }, "1"), _jsx(Flex.Item, {
65
64
  padding: "x-small",
66
- size: "25%"
67
- }, "I am always 25%.")];
65
+ size: "25%",
66
+ children: "I am always 25%."
67
+ }, "2")];
68
68
  export default {
69
69
  maxExamplesPerPage: 50,
70
70
  propValues: {
package/es/Flex/__new-tests__/Flex.test.js CHANGED
@@ -23,103 +23,163 @@ var _Flex, _Flex2, _div, _Flex3, _Flex4, _Flex5, _Flex6, _Flex7, _Flex8, _Flex9,
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 { vi } from 'vitest';
29
28
  import '@testing-library/jest-dom';
30
29
  import { runAxeCheck } from '@instructure/ui-axe-check';
31
30
  import { Flex } from '../index';
31
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
32
32
  describe('<Flex />', () => {
33
33
  it('should render Flex.Items as children', async () => {
34
- const _render = render(_Flex || (_Flex = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 3"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 4")))),
34
+ const _render = render(_Flex || (_Flex = _jsxs(Flex, {
35
+ children: [_jsx(Flex.Item, {
36
+ children: "Flex item 1"
37
+ }), _jsx(Flex.Item, {
38
+ children: "Flex item 2"
39
+ }), _jsx(Flex.Item, {
40
+ children: "Flex item 3"
41
+ }), _jsx(Flex.Item, {
42
+ children: "Flex item 4"
43
+ })]
44
+ }))),
35
45
  container = _render.container;
36
- const flex = container.querySelector('[class$="-flex-flex"]');
46
+ const flex = container.querySelector('[class*="flex"]');
37
47
  expect(flex).toBeInTheDocument();
38
- const items = flex === null || flex === void 0 ? void 0 : flex.querySelectorAll('[class$="-flexItem"]');
48
+ const items = flex === null || flex === void 0 ? void 0 : flex.querySelectorAll('[class*="-flexItem"]');
39
49
  expect(items === null || items === void 0 ? void 0 : items.length).toBe(4);
40
50
  });
41
51
  it('should render other markup as children', async () => {
42
- const _render2 = render(_Flex2 || (_Flex2 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement("div", null, "foo"), /*#__PURE__*/React.createElement("div", null, "bar"), /*#__PURE__*/React.createElement("div", null, "baz")))),
52
+ const _render2 = render(_Flex2 || (_Flex2 = _jsxs(Flex, {
53
+ children: [_jsx("div", {
54
+ children: "foo"
55
+ }), _jsx("div", {
56
+ children: "bar"
57
+ }), _jsx("div", {
58
+ children: "baz"
59
+ })]
60
+ }))),
43
61
  container = _render2.container;
44
- const flex = container.querySelector('[class$="-flex-flex"]');
62
+ const flex = container.querySelector('[class*="flex"]');
45
63
  const childs = flex === null || flex === void 0 ? void 0 : flex.childNodes;
46
64
  expect(childs === null || childs === void 0 ? void 0 : childs.length).toBe(3);
47
65
  });
48
66
  it('should render children when children is a function', async () => {
49
- render(/*#__PURE__*/React.createElement(Flex, null, () => _div || (_div = /*#__PURE__*/React.createElement("div", null, "hello world"))));
67
+ render(_jsx(Flex, {
68
+ children: () => _div || (_div = _jsx("div", {
69
+ children: "hello world"
70
+ }))
71
+ }));
50
72
  const child = screen.getByText('hello world');
51
73
  expect(child).toBeInTheDocument();
52
74
  });
53
75
  it('should render no markup if there are no children', async () => {
54
- const _render3 = render(_Flex3 || (_Flex3 = /*#__PURE__*/React.createElement(Flex, null))),
76
+ const _render3 = render(_Flex3 || (_Flex3 = _jsx(Flex, {}))),
55
77
  container = _render3.container;
56
- const flex = container.querySelector('[class$="-flex-flex"]');
78
+ const flex = container.querySelector('[class*="flex"]');
57
79
  expect(flex).not.toBeInTheDocument();
58
80
  });
59
81
  it('should accept width and height as props', async () => {
60
- const _render4 = render(_Flex4 || (_Flex4 = /*#__PURE__*/React.createElement(Flex, {
82
+ const _render4 = render(_Flex4 || (_Flex4 = _jsxs(Flex, {
61
83
  width: "400px",
62
- height: "200px"
63
- }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 3"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 4")))),
84
+ height: "200px",
85
+ children: [_jsx(Flex.Item, {
86
+ children: "Flex item 1"
87
+ }), _jsx(Flex.Item, {
88
+ children: "Flex item 2"
89
+ }), _jsx(Flex.Item, {
90
+ children: "Flex item 3"
91
+ }), _jsx(Flex.Item, {
92
+ children: "Flex item 4"
93
+ })]
94
+ }))),
64
95
  container = _render4.container;
65
- const flex = container.querySelector('[class$="-flex-flex"]');
96
+ const flex = container.querySelector('[class*="flex"]');
66
97
  const flexStyle = window.getComputedStyle(flex);
67
98
  expect(flexStyle.width).toBe('400px');
68
99
  expect(flexStyle.height).toBe('200px');
69
100
  });
70
101
  it('should set flex-direction with the direction property', async () => {
71
- const _render5 = render(_Flex5 || (_Flex5 = /*#__PURE__*/React.createElement(Flex, {
72
- direction: "column"
73
- }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
102
+ const _render5 = render(_Flex5 || (_Flex5 = _jsxs(Flex, {
103
+ direction: "column",
104
+ children: [_jsx(Flex.Item, {
105
+ children: "Flex item 1"
106
+ }), _jsx(Flex.Item, {
107
+ children: "Flex item 2"
108
+ })]
109
+ }))),
74
110
  container = _render5.container;
75
- const flex = container.querySelector('[class$="-flex-flex"]');
111
+ const flex = container.querySelector('[class*="flex"]');
76
112
  const flexStyle = window.getComputedStyle(flex);
77
113
  expect(flexStyle.flexDirection).toBe('column');
78
114
  });
79
115
  it('should render an inline-flex container with the display property', async () => {
80
- const _render6 = render(_Flex6 || (_Flex6 = /*#__PURE__*/React.createElement(Flex, {
81
- display: "inline-flex"
82
- }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
116
+ const _render6 = render(_Flex6 || (_Flex6 = _jsxs(Flex, {
117
+ display: "inline-flex",
118
+ children: [_jsx(Flex.Item, {
119
+ children: "Flex item 1"
120
+ }), _jsx(Flex.Item, {
121
+ children: "Flex item 2"
122
+ })]
123
+ }))),
83
124
  container = _render6.container;
84
- const flex = container.querySelector('[class$="-inlineFlex-flex"]');
125
+ const flex = container.querySelector('[class*="inlineFlex"][class*="flex"]');
85
126
  const flexStyle = window.getComputedStyle(flex);
86
127
  expect(flexStyle.display).toBe('inline-flex');
87
128
  });
88
129
  it('should set align-items with the alignItems property', async () => {
89
- const _render7 = render(_Flex7 || (_Flex7 = /*#__PURE__*/React.createElement(Flex, {
90
- alignItems: "start"
91
- }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
130
+ const _render7 = render(_Flex7 || (_Flex7 = _jsxs(Flex, {
131
+ alignItems: "start",
132
+ children: [_jsx(Flex.Item, {
133
+ children: "Flex item 1"
134
+ }), _jsx(Flex.Item, {
135
+ children: "Flex item 2"
136
+ })]
137
+ }))),
92
138
  container = _render7.container;
93
- const flex = container.querySelector('[class$="-flex-flex"]');
139
+ const flex = container.querySelector('[class*="flex"]');
94
140
  const flexStyle = window.getComputedStyle(flex);
95
141
  expect(flexStyle.alignItems).toBe('flex-start');
96
142
  });
97
143
  it('should set justify-content with the justifyItems property', async () => {
98
- const _render8 = render(_Flex8 || (_Flex8 = /*#__PURE__*/React.createElement(Flex, {
99
- justifyItems: "space-between"
100
- }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
144
+ const _render8 = render(_Flex8 || (_Flex8 = _jsxs(Flex, {
145
+ justifyItems: "space-between",
146
+ children: [_jsx(Flex.Item, {
147
+ children: "Flex item 1"
148
+ }), _jsx(Flex.Item, {
149
+ children: "Flex item 2"
150
+ })]
151
+ }))),
101
152
  container = _render8.container;
102
- const flex = container.querySelector('[class$="-flex-flex"]');
153
+ const flex = container.querySelector('[class*="flex"]');
103
154
  const flexStyle = window.getComputedStyle(flex);
104
155
  expect(flexStyle.justifyContent).toBe('space-between');
105
156
  });
106
157
  it('should set flex-wrap with the wrap property', async () => {
107
- const _render9 = render(_Flex9 || (_Flex9 = /*#__PURE__*/React.createElement(Flex, {
108
- wrap: "wrap"
109
- }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
158
+ const _render9 = render(_Flex9 || (_Flex9 = _jsxs(Flex, {
159
+ wrap: "wrap",
160
+ children: [_jsx(Flex.Item, {
161
+ children: "Flex item 1"
162
+ }), _jsx(Flex.Item, {
163
+ children: "Flex item 2"
164
+ })]
165
+ }))),
110
166
  container = _render9.container;
111
- const flex = container.querySelector('[class$="-flex-flex"]');
167
+ const flex = container.querySelector('[class*="flex"]');
112
168
  const flexStyle = window.getComputedStyle(flex);
113
169
  expect(flexStyle.flexWrap).toBe('wrap');
114
170
  });
115
171
  it('should let Flex.Items align themselves with the align property', async () => {
116
- const _render10 = render(_Flex10 || (_Flex10 = /*#__PURE__*/React.createElement(Flex, {
117
- alignItems: "end"
118
- }, /*#__PURE__*/React.createElement(Flex.Item, {
119
- align: "stretch"
120
- }, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
172
+ const _render10 = render(_Flex10 || (_Flex10 = _jsxs(Flex, {
173
+ alignItems: "end",
174
+ children: [_jsx(Flex.Item, {
175
+ align: "stretch",
176
+ children: "Flex item 1"
177
+ }), _jsx(Flex.Item, {
178
+ children: "Flex item 2"
179
+ })]
180
+ }))),
121
181
  container = _render10.container;
122
- const flex = container.querySelector('[class$="-flex-flex"]');
182
+ const flex = container.querySelector('[class*="flex"]');
123
183
  const item = screen.getByText('Flex item 1');
124
184
  const flexStyle = window.getComputedStyle(flex);
125
185
  const itemStyle = window.getComputedStyle(item);
@@ -127,9 +187,14 @@ describe('<Flex />', () => {
127
187
  expect(itemStyle.alignSelf).toBe('stretch');
128
188
  });
129
189
  it('should let Flex.Items flex-grow with the shouldGrow property', async () => {
130
- render(_Flex11 || (_Flex11 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, {
131
- shouldGrow: true
132
- }, "Flex item 2"))));
190
+ render(_Flex11 || (_Flex11 = _jsxs(Flex, {
191
+ children: [_jsx(Flex.Item, {
192
+ children: "Flex item 1"
193
+ }), _jsx(Flex.Item, {
194
+ shouldGrow: true,
195
+ children: "Flex item 2"
196
+ })]
197
+ })));
133
198
  const item1 = screen.getByText('Flex item 1');
134
199
  const item2 = screen.getByText('Flex item 2');
135
200
  const item1Style = window.getComputedStyle(item1);
@@ -138,9 +203,14 @@ describe('<Flex />', () => {
138
203
  expect(item2Style.flexGrow).toBe('1');
139
204
  });
140
205
  it('should let Flex.Items flex-shrink with the shouldShrink property', async () => {
141
- render(_Flex12 || (_Flex12 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, {
142
- shouldShrink: true
143
- }, "Flex item 2"))));
206
+ render(_Flex12 || (_Flex12 = _jsxs(Flex, {
207
+ children: [_jsx(Flex.Item, {
208
+ children: "Flex item 1"
209
+ }), _jsx(Flex.Item, {
210
+ shouldShrink: true,
211
+ children: "Flex item 2"
212
+ })]
213
+ })));
144
214
  const item1 = screen.getByText('Flex item 1');
145
215
  const item2 = screen.getByText('Flex item 2');
146
216
  const item1Style = window.getComputedStyle(item1);
@@ -149,9 +219,16 @@ describe('<Flex />', () => {
149
219
  expect(item2Style.flexShrink).toBe('1');
150
220
  });
151
221
  it('should set flex-basis and min-width on Flex.Items with the size property', async () => {
152
- render(_Flex13 || (_Flex13 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, {
153
- size: "100px"
154
- }, "Flex item 3"))));
222
+ render(_Flex13 || (_Flex13 = _jsxs(Flex, {
223
+ children: [_jsx(Flex.Item, {
224
+ children: "Flex item 1"
225
+ }), _jsx(Flex.Item, {
226
+ children: "Flex item 2"
227
+ }), _jsx(Flex.Item, {
228
+ size: "100px",
229
+ children: "Flex item 3"
230
+ })]
231
+ })));
155
232
  const item2 = screen.getByText('Flex item 2');
156
233
  const item3 = screen.getByText('Flex item 3');
157
234
  const item2Style = window.getComputedStyle(item2);
@@ -162,17 +239,26 @@ describe('<Flex />', () => {
162
239
  });
163
240
  it('should support an elementRef prop', async () => {
164
241
  const elementRef = vi.fn();
165
- const _render11 = render(/*#__PURE__*/React.createElement(Flex, {
166
- elementRef: elementRef
167
- }, _Flex$Item || (_Flex$Item = /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item")))),
242
+ const _render11 = render(_jsx(Flex, {
243
+ elementRef: elementRef,
244
+ children: _Flex$Item || (_Flex$Item = _jsx(Flex.Item, {
245
+ children: "Flex item"
246
+ }))
247
+ })),
168
248
  container = _render11.container;
169
- const flex = container.querySelector('[class$="-flex-flex"]');
249
+ const flex = container.querySelector('[class*="flex"]');
170
250
  await waitFor(() => {
171
251
  expect(elementRef).toHaveBeenCalledWith(flex);
172
252
  });
173
253
  });
174
254
  it('should meet a11y standards', async () => {
175
- const _render12 = render(_Flex14 || (_Flex14 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
255
+ const _render12 = render(_Flex14 || (_Flex14 = _jsxs(Flex, {
256
+ children: [_jsx(Flex.Item, {
257
+ children: "Flex item 1"
258
+ }), _jsx(Flex.Item, {
259
+ children: "Flex item 2"
260
+ })]
261
+ }))),
176
262
  container = _render12.container;
177
263
  const axeCheck = await runAxeCheck(container);
178
264
  expect(axeCheck).toBe(true);
package/es/Flex/index.js CHANGED
@@ -23,15 +23,15 @@ var _dec, _class, _Flex;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- /** @jsx jsx */
27
- import React, { Children, Component } from 'react';
26
+ import { Children, Component } from 'react';
28
27
  import { safeCloneElement, passthroughProps, matchComponentTypes, callRenderProp } from '@instructure/ui-react-utils';
29
28
  import { View } from '@instructure/ui-view';
30
- import { withStyle, jsx } from '@instructure/emotion';
29
+ import { withStyle } from '@instructure/emotion';
31
30
  import { Item } from './Item';
32
31
  import generateStyle from './styles';
33
32
  import generateComponentTheme from './theme';
34
33
  import { propTypes, allowedProps } from './props';
34
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
35
35
  /**
36
36
  ---
37
37
  category: components
@@ -89,7 +89,8 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
89
89
  const gapValuesArray = gap === null || gap === void 0 ? void 0 : gap.split(' ');
90
90
  if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
91
91
  if (children && Children.count(children) > 0) {
92
- return jsx(View, Object.assign({}, passthroughProps(this.props), {
92
+ return _jsx(View, {
93
+ ...passthroughProps(this.props),
93
94
  css: styles === null || styles === void 0 ? void 0 : styles.flex,
94
95
  elementRef: this.handleRef,
95
96
  as: as,
@@ -99,8 +100,9 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
99
100
  margin: margin,
100
101
  padding: padding,
101
102
  textAlign: textAlign,
102
- withVisualDebug: withVisualDebug
103
- }), this.renderChildren(children));
103
+ withVisualDebug: withVisualDebug,
104
+ children: this.renderChildren(children)
105
+ });
104
106
  } else {
105
107
  return null;
106
108
  }
package/lib/Flex/Item/__new-tests__/FlexItem.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 _Item, _Item2;
11
10
  /*
12
11
  * The MIT License (MIT)
@@ -33,25 +32,30 @@ var _Item, _Item2;
33
32
  */
34
33
  describe('<Item />', () => {
35
34
  it('should render children', async () => {
36
- const _render = (0, _react2.render)(_Item || (_Item = /*#__PURE__*/_react.default.createElement(_index.Item, null, "Flex item 1"))),
35
+ const _render = (0, _react.render)(_Item || (_Item = (0, _jsxRuntime.jsx)(_index.Item, {
36
+ children: "Flex item 1"
37
+ }))),
37
38
  container = _render.container;
38
- const item = container.querySelector('[class$="-flexItem"]');
39
+ const item = container.querySelector('[class*="-flexItem"]');
39
40
  expect(item).toBeInTheDocument();
40
41
  expect(item).toHaveTextContent('Flex item 1');
41
42
  });
42
43
  it('should support an elementRef prop', async () => {
43
44
  const elementRef = _vitest.vi.fn();
44
- const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Item, {
45
- elementRef: elementRef
46
- }, "Flex item 2")),
45
+ const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Item, {
46
+ elementRef: elementRef,
47
+ children: "Flex item 2"
48
+ })),
47
49
  container = _render2.container;
48
- const item = container.querySelector('[class$="-flexItem"]');
49
- await (0, _react2.waitFor)(() => {
50
+ const item = container.querySelector('[class*="-flexItem"]');
51
+ await (0, _react.waitFor)(() => {
50
52
  expect(elementRef).toHaveBeenCalledWith(item);
51
53
  });
52
54
  });
53
55
  it('should meet a11y standards', async () => {
54
- const _render3 = (0, _react2.render)(_Item2 || (_Item2 = /*#__PURE__*/_react.default.createElement(_index.Item, null, "Flex item 3"))),
56
+ const _render3 = (0, _react.render)(_Item2 || (_Item2 = (0, _jsxRuntime.jsx)(_index.Item, {
57
+ children: "Flex item 3"
58
+ }))),
55
59
  container = _render3.container;
56
60
  const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
57
61
  expect(axeCheck).toBe(true);
package/lib/Flex/Item/index.js CHANGED
@@ -11,6 +11,7 @@ var _View = require("@instructure/ui-view/lib/View");
11
11
  var _emotion = require("@instructure/emotion");
12
12
  var _styles = _interopRequireDefault(require("./styles"));
13
13
  var _props = require("./props");
14
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
14
15
  var _dec, _class, _Item;
15
16
  /*
16
17
  * The MIT License (MIT)
@@ -35,7 +36,6 @@ var _dec, _class, _Item;
35
36
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
36
37
  * SOFTWARE.
37
38
  */
38
- /** @jsx jsx */
39
39
  /**
40
40
  ---
41
41
  parent: Flex
@@ -78,7 +78,8 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, null)
78
78
  styles = _this$props3.styles;
79
79
  const dirColumn = direction === 'column';
80
80
  const dirRow = direction === 'row';
81
- return (0, _emotion.jsx)(_View.View, Object.assign({}, props, {
81
+ return (0, _jsxRuntime.jsx)(_View.View, {
82
+ ...props,
82
83
  css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
83
84
  elementRef: this.handleRef,
84
85
  as: as,
@@ -89,8 +90,9 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, null)
89
90
  padding: padding,
90
91
  overflowX: overflowX,
91
92
  overflowY: overflowY || (dirColumn ? 'auto' : 'visible'),
92
- withVisualDebug: withVisualDebug
93
- }), children);
93
+ withVisualDebug: withVisualDebug,
94
+ children: children
95
+ });
94
96
  }
95
97
  }, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.propTypes = _props.propTypes, _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
96
98
  as: 'span',