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