@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/src/Flex/__new-tests__/Flex.test.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react'
26
25
  import { render, screen, waitFor } from '@testing-library/react'
27
26
  import { vi } from 'vitest'
28
27
 
@@ -40,10 +39,10 @@ describe('<Flex />', () => {
40
39
  <Flex.Item>Flex item 4</Flex.Item>
41
40
  </Flex>
42
41
  )
43
- const flex = container.querySelector('[class$="-flex-flex"]')
42
+ const flex = container.querySelector('[class*="flex"]')
44
43
  expect(flex).toBeInTheDocument()
45
44
 
46
- const items = flex?.querySelectorAll('[class$="-flexItem"]')
45
+ const items = flex?.querySelectorAll('[class*="-flexItem"]')
47
46
  expect(items?.length).toBe(4)
48
47
  })
49
48
 
@@ -55,7 +54,7 @@ describe('<Flex />', () => {
55
54
  <div>baz</div>
56
55
  </Flex>
57
56
  )
58
- const flex = container.querySelector('[class$="-flex-flex"]')
57
+ const flex = container.querySelector('[class*="flex"]')
59
58
  const childs = flex?.childNodes
60
59
 
61
60
  expect(childs?.length).toBe(3)
@@ -70,7 +69,7 @@ describe('<Flex />', () => {
70
69
 
71
70
  it('should render no markup if there are no children', async () => {
72
71
  const { container } = render(<Flex></Flex>)
73
- const flex = container.querySelector('[class$="-flex-flex"]')
72
+ const flex = container.querySelector('[class*="flex"]')
74
73
 
75
74
  expect(flex).not.toBeInTheDocument()
76
75
  })
@@ -84,7 +83,7 @@ describe('<Flex />', () => {
84
83
  <Flex.Item>Flex item 4</Flex.Item>
85
84
  </Flex>
86
85
  )
87
- const flex = container.querySelector('[class$="-flex-flex"]')!
86
+ const flex = container.querySelector('[class*="flex"]')!
88
87
  const flexStyle = window.getComputedStyle(flex)
89
88
 
90
89
  expect(flexStyle.width).toBe('400px')
@@ -98,7 +97,7 @@ describe('<Flex />', () => {
98
97
  <Flex.Item>Flex item 2</Flex.Item>
99
98
  </Flex>
100
99
  )
101
- const flex = container.querySelector('[class$="-flex-flex"]')!
100
+ const flex = container.querySelector('[class*="flex"]')!
102
101
  const flexStyle = window.getComputedStyle(flex)
103
102
 
104
103
  expect(flexStyle.flexDirection).toBe('column')
@@ -111,7 +110,9 @@ describe('<Flex />', () => {
111
110
  <Flex.Item>Flex item 2</Flex.Item>
112
111
  </Flex>
113
112
  )
114
- const flex = container.querySelector('[class$="-inlineFlex-flex"]')!
113
+ const flex = container.querySelector(
114
+ '[class*="inlineFlex"][class*="flex"]'
115
+ )!
115
116
  const flexStyle = window.getComputedStyle(flex)
116
117
 
117
118
  expect(flexStyle.display).toBe('inline-flex')
@@ -124,7 +125,7 @@ describe('<Flex />', () => {
124
125
  <Flex.Item>Flex item 2</Flex.Item>
125
126
  </Flex>
126
127
  )
127
- const flex = container.querySelector('[class$="-flex-flex"]')!
128
+ const flex = container.querySelector('[class*="flex"]')!
128
129
  const flexStyle = window.getComputedStyle(flex)
129
130
 
130
131
  expect(flexStyle.alignItems).toBe('flex-start')
@@ -137,7 +138,7 @@ describe('<Flex />', () => {
137
138
  <Flex.Item>Flex item 2</Flex.Item>
138
139
  </Flex>
139
140
  )
140
- const flex = container.querySelector('[class$="-flex-flex"]')!
141
+ const flex = container.querySelector('[class*="flex"]')!
141
142
  const flexStyle = window.getComputedStyle(flex)
142
143
 
143
144
  expect(flexStyle.justifyContent).toBe('space-between')
@@ -150,7 +151,7 @@ describe('<Flex />', () => {
150
151
  <Flex.Item>Flex item 2</Flex.Item>
151
152
  </Flex>
152
153
  )
153
- const flex = container.querySelector('[class$="-flex-flex"]')!
154
+ const flex = container.querySelector('[class*="flex"]')!
154
155
  const flexStyle = window.getComputedStyle(flex)
155
156
 
156
157
  expect(flexStyle.flexWrap).toBe('wrap')
@@ -163,7 +164,7 @@ describe('<Flex />', () => {
163
164
  <Flex.Item>Flex item 2</Flex.Item>
164
165
  </Flex>
165
166
  )
166
- const flex = container.querySelector('[class$="-flex-flex"]')!
167
+ const flex = container.querySelector('[class*="flex"]')!
167
168
  const item = screen.getByText('Flex item 1')
168
169
 
169
170
  const flexStyle = window.getComputedStyle(flex)
@@ -234,7 +235,7 @@ describe('<Flex />', () => {
234
235
  <Flex.Item>Flex item</Flex.Item>
235
236
  </Flex>
236
237
  )
237
- const flex = container.querySelector('[class$="-flex-flex"]')
238
+ const flex = container.querySelector('[class*="flex"]')
238
239
 
239
240
  await waitFor(() => {
240
241
  expect(elementRef).toHaveBeenCalledWith(flex)
package/src/Flex/index.tsx CHANGED
@@ -22,8 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
- import React, { Children, Component } from 'react'
25
+ import { ComponentElement, Children, Component } from 'react'
27
26
 
28
27
  import {
29
28
  safeCloneElement,
@@ -32,7 +31,7 @@ import {
32
31
  callRenderProp
33
32
  } from '@instructure/ui-react-utils'
34
33
  import { View } from '@instructure/ui-view'
35
- import { withStyle, jsx } from '@instructure/emotion'
34
+ import { withStyle } from '@instructure/emotion'
36
35
 
37
36
  import { Item } from './Item'
38
37
  import type { FlexItemProps } from './Item/props'
@@ -94,10 +93,9 @@ class Flex extends Component<FlexProps> {
94
93
  return null
95
94
  }
96
95
 
97
- return matchComponentTypes<React.ComponentElement<FlexItemProps, Item>>(
98
- child,
99
- ['Item']
100
- )
96
+ return matchComponentTypes<ComponentElement<FlexItemProps, Item>>(child, [
97
+ 'Item'
98
+ ])
101
99
  ? safeCloneElement(child, {
102
100
  // child withVisualDebug prop should override parent
103
101
  withVisualDebug: this.props.withVisualDebug,