@atlaskit/popper 6.0.0 → 6.2.0

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 (9) hide show
  1. package/CHANGELOG.md +377 -360
  2. package/__perf__/default.tsx +17 -16
  3. package/codemods/5.0.0-lite-mode.tsx +126 -156
  4. package/codemods/__tests__/update-modifier.tsx +15 -15
  5. package/codemods/__tests__/update-offset-prop.tsx +71 -71
  6. package/codemods/__tests__/update-render-props.tsx +13 -13
  7. package/codemods/utils/helpers.tsx +250 -261
  8. package/package.json +91 -93
  9. package/report.api.md +15 -14
package/__perf__/default.tsx CHANGED
@@ -3,20 +3,21 @@ import React from 'react';
3
3
  import { Manager, Popper, Reference } from '../src';
4
4
 
5
5
  export default () => (
6
- <Manager>
7
- <Reference>
8
- {({ ref }) => (
9
- <button ref={ref} type="button">
10
- Reference element
11
- </button>
12
- )}
13
- </Reference>
14
- <Popper placement="right">
15
- {({ ref, style }) => (
16
- <div ref={ref} style={style}>
17
- ↔ This text is a popper placed to the right
18
- </div>
19
- )}
20
- </Popper>
21
- </Manager>
6
+ <Manager>
7
+ <Reference>
8
+ {({ ref }) => (
9
+ <button ref={ref} type="button">
10
+ Reference element
11
+ </button>
12
+ )}
13
+ </Reference>
14
+ <Popper placement="right">
15
+ {({ ref, style }) => (
16
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
17
+ <div ref={ref} style={style}>
18
+ ↔ This text is a popper placed to the right
19
+ </div>
20
+ )}
21
+ </Popper>
22
+ </Manager>
22
23
  );
package/codemods/5.0.0-lite-mode.tsx CHANGED
@@ -1,182 +1,152 @@
1
1
  import {
2
- type API,
3
- type ASTPath,
4
- type default as core,
5
- type FileInfo,
6
- type JSXElement,
7
- JSXExpressionContainer,
8
- type Literal,
9
- type Options,
10
- StringLiteral,
2
+ type API,
3
+ type ASTPath,
4
+ type default as core,
5
+ type FileInfo,
6
+ type JSXElement,
7
+ JSXExpressionContainer,
8
+ type Literal,
9
+ type Options,
10
+ StringLiteral,
11
11
  } from 'jscodeshift';
12
12
  import { type Collection } from 'jscodeshift/src/Collection';
13
13
 
14
14
  import {
15
- messageForModifierProps,
16
- messageForUsingExpression,
17
- messageForUsingVariable,
15
+ messageForModifierProps,
16
+ messageForUsingExpression,
17
+ messageForUsingVariable,
18
18
  } from './utils/constants';
19
19
  import {
20
- addCommentToStartOfFile,
21
- getJSXAttributesByName,
22
- getSpecifierName,
23
- hasImportDeclaration,
24
- isUsingProp,
25
- updateRenderProps,
20
+ addCommentToStartOfFile,
21
+ getJSXAttributesByName,
22
+ getSpecifierName,
23
+ hasImportDeclaration,
24
+ isUsingProp,
25
+ updateRenderProps,
26
26
  } from './utils/helpers';
27
27
 
28
- const updateOffsetNumbers = (
29
- value: string,
30
- j: core.JSCodeshift,
31
- attribute: ASTPath<any>,
32
- ) => {
33
- if (value.includes(',')) {
34
- // Split by comma
35
- const offsetArray: Literal[] = value
36
- .split(',')
37
- //@ts-ignore
38
- .map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
39
- if (offsetArray.length === 2) {
40
- j(attribute).replaceWith(
41
- j.jsxExpressionContainer(j.arrayExpression(offsetArray)),
42
- );
43
- }
44
- } else {
45
- // Split by space but check if it is a single number
46
- const offsetArray: Literal[] = value
47
- .split(' ')
48
- .filter((elem) => elem.length)
49
- .map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
50
- if (offsetArray.length === 2) {
51
- j(attribute).replaceWith(
52
- j.jsxExpressionContainer(j.arrayExpression(offsetArray)),
53
- );
54
- } else if (offsetArray.length === 1) {
55
- j(attribute).replaceWith(
56
- j.jsxExpressionContainer(
57
- j.arrayExpression([offsetArray[0], j.literal(0)]),
58
- ),
59
- );
60
- }
61
- }
28
+ const updateOffsetNumbers = (value: string, j: core.JSCodeshift, attribute: ASTPath<any>) => {
29
+ if (value.includes(',')) {
30
+ // Split by comma
31
+ const offsetArray: Literal[] = value
32
+ .split(',')
33
+ //@ts-ignore
34
+ .map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
35
+ if (offsetArray.length === 2) {
36
+ j(attribute).replaceWith(j.jsxExpressionContainer(j.arrayExpression(offsetArray)));
37
+ }
38
+ } else {
39
+ // Split by space but check if it is a single number
40
+ const offsetArray: Literal[] = value
41
+ .split(' ')
42
+ .filter((elem) => elem.length)
43
+ .map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
44
+ if (offsetArray.length === 2) {
45
+ j(attribute).replaceWith(j.jsxExpressionContainer(j.arrayExpression(offsetArray)));
46
+ } else if (offsetArray.length === 1) {
47
+ j(attribute).replaceWith(
48
+ j.jsxExpressionContainer(j.arrayExpression([offsetArray[0], j.literal(0)])),
49
+ );
50
+ }
51
+ }
62
52
  };
63
53
 
64
54
  const isJSExpression = (value: string) =>
65
- value.includes('%') || value.includes('vw') || value.includes('vh');
55
+ value.includes('%') || value.includes('vw') || value.includes('vh');
66
56
 
67
- function updateOffset(
68
- j: core.JSCodeshift,
69
- source: Collection<any>,
70
- specifier: string,
71
- ) {
72
- source.findJSXElements(specifier).forEach((path: ASTPath<JSXElement>) => {
73
- const offsetExpr = getJSXAttributesByName({
74
- j,
75
- element: path,
76
- attributeName: 'offset',
77
- });
57
+ function updateOffset(j: core.JSCodeshift, source: Collection<any>, specifier: string) {
58
+ source.findJSXElements(specifier).forEach((path: ASTPath<JSXElement>) => {
59
+ const offsetExpr = getJSXAttributesByName({
60
+ j,
61
+ element: path,
62
+ attributeName: 'offset',
63
+ });
78
64
 
79
- const stringLiteral = offsetExpr.filter((attr) => {
80
- return attr.value!.value!.type === 'StringLiteral';
81
- });
65
+ const stringLiteral = offsetExpr.filter((attr) => {
66
+ return attr.value!.value!.type === 'StringLiteral';
67
+ });
82
68
 
83
- const expression = offsetExpr.filter((attr) => {
84
- return attr.value!.value!.type === 'JSXExpressionContainer';
85
- });
69
+ const expression = offsetExpr.filter((attr) => {
70
+ return attr.value!.value!.type === 'JSXExpressionContainer';
71
+ });
86
72
 
87
- if (stringLiteral.length > 0) {
88
- stringLiteral.find(StringLiteral).forEach((attribute) => {
89
- const expression = attribute.value;
90
- updateOffsetNumbers(expression.value, j, attribute);
91
- });
92
- } else {
93
- expression.find(JSXExpressionContainer).forEach((attribute) => {
94
- const expression = attribute.value.expression;
95
- if (expression.type === 'StringLiteral') {
96
- const value = expression.value;
97
- // Not testing for cases like '10 + 10%' because I assume if you're
98
- // adding or taking numbers it's with units that are not supported
99
- // and will be picked up by the first case
100
- if (isJSExpression(value)) {
101
- addCommentToStartOfFile({
102
- j,
103
- base: source,
104
- message: messageForUsingExpression,
105
- });
106
- } else {
107
- updateOffsetNumbers(value, j, attribute);
108
- }
109
- } else if (expression.type === 'NumericLiteral') {
110
- // If it is a single number convert to [number, 0]
111
- j(attribute).replaceWith(
112
- j.jsxExpressionContainer(
113
- j.arrayExpression([expression, j.literal(0)]),
114
- ),
115
- );
116
- } else if (expression.type === 'Identifier') {
117
- // If there is a variable add this comment
118
- addCommentToStartOfFile({
119
- j,
120
- base: source,
121
- message: messageForUsingVariable,
122
- });
123
- }
124
- });
125
- }
126
- });
73
+ if (stringLiteral.length > 0) {
74
+ stringLiteral.find(StringLiteral).forEach((attribute) => {
75
+ const expression = attribute.value;
76
+ updateOffsetNumbers(expression.value, j, attribute);
77
+ });
78
+ } else {
79
+ expression.find(JSXExpressionContainer).forEach((attribute) => {
80
+ const expression = attribute.value.expression;
81
+ if (expression.type === 'StringLiteral') {
82
+ const value = expression.value;
83
+ // Not testing for cases like '10 + 10%' because I assume if you're
84
+ // adding or taking numbers it's with units that are not supported
85
+ // and will be picked up by the first case
86
+ if (isJSExpression(value)) {
87
+ addCommentToStartOfFile({
88
+ j,
89
+ base: source,
90
+ message: messageForUsingExpression,
91
+ });
92
+ } else {
93
+ updateOffsetNumbers(value, j, attribute);
94
+ }
95
+ } else if (expression.type === 'NumericLiteral') {
96
+ // If it is a single number convert to [number, 0]
97
+ j(attribute).replaceWith(
98
+ j.jsxExpressionContainer(j.arrayExpression([expression, j.literal(0)])),
99
+ );
100
+ } else if (expression.type === 'Identifier') {
101
+ // If there is a variable add this comment
102
+ addCommentToStartOfFile({
103
+ j,
104
+ base: source,
105
+ message: messageForUsingVariable,
106
+ });
107
+ }
108
+ });
109
+ }
110
+ });
127
111
  }
128
112
 
129
- function updateModifierProp(
130
- j: core.JSCodeshift,
131
- source: Collection<any>,
132
- specifier: string,
133
- ) {
134
- source.findJSXElements(specifier).forEach((element) => {
135
- if (isUsingProp({ j, base: source, element, propName: 'modifiers' })) {
136
- addCommentToStartOfFile({
137
- j,
138
- base: source,
139
- message: messageForModifierProps,
140
- });
141
- }
142
- });
113
+ function updateModifierProp(j: core.JSCodeshift, source: Collection<any>, specifier: string) {
114
+ source.findJSXElements(specifier).forEach((element) => {
115
+ if (isUsingProp({ j, base: source, element, propName: 'modifiers' })) {
116
+ addCommentToStartOfFile({
117
+ j,
118
+ base: source,
119
+ message: messageForModifierProps,
120
+ });
121
+ }
122
+ });
143
123
  }
144
124
 
145
- export default function transformer(
146
- file: FileInfo,
147
- { jscodeshift: j }: API,
148
- options: Options,
149
- ) {
150
- const source = j(file.source);
125
+ export default function transformer(file: FileInfo, { jscodeshift: j }: API, options: Options) {
126
+ const source = j(file.source);
151
127
 
152
- // Exit early if not relevant
153
- // We are doing this so we don't touch the formatting of unrelated files
154
- if (!hasImportDeclaration(j, file.source, '@atlaskit/popper')) {
155
- return file.source;
156
- }
128
+ // Exit early if not relevant
129
+ // We are doing this so we don't touch the formatting of unrelated files
130
+ if (!hasImportDeclaration(j, file.source, '@atlaskit/popper')) {
131
+ return file.source;
132
+ }
157
133
 
158
- const specifier = getSpecifierName({
159
- j,
160
- base: source,
161
- packageName: '@atlaskit/popper',
162
- component: 'Popper',
163
- });
134
+ const specifier = getSpecifierName({
135
+ j,
136
+ base: source,
137
+ packageName: '@atlaskit/popper',
138
+ component: 'Popper',
139
+ });
164
140
 
165
- if (!specifier) {
166
- return file.source;
167
- }
141
+ if (!specifier) {
142
+ return file.source;
143
+ }
168
144
 
169
- updateRenderProps(
170
- j,
171
- source,
172
- specifier,
173
- 'outOfBoundaries',
174
- 'isReferenceHidden',
175
- );
176
- updateRenderProps(j, source, specifier, 'scheduleUpdate', 'update');
177
- updateOffset(j, source, specifier);
178
- updateModifierProp(j, source, specifier);
145
+ updateRenderProps(j, source, specifier, 'outOfBoundaries', 'isReferenceHidden');
146
+ updateRenderProps(j, source, specifier, 'scheduleUpdate', 'update');
147
+ updateOffset(j, source, specifier);
148
+ updateModifierProp(j, source, specifier);
179
149
 
180
- // const base: Collection<any> = j(file.source);
181
- return source.toSource(options.printOptions || { quote: 'single' });
150
+ // const base: Collection<any> = j(file.source);
151
+ return source.toSource(options.printOptions || { quote: 'single' });
182
152
  }
package/codemods/__tests__/update-modifier.tsx CHANGED
@@ -5,20 +5,20 @@ import transformer from '../5.0.0-lite-mode';
5
5
  const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
6
6
 
7
7
  describe('Changing popper usage', () => {
8
- // TODO this probably isn't worth including, as they still have to do some major work to
9
- // re-work these modifiers.
8
+ // TODO this probably isn't worth including, as they still have to do some major work to
9
+ // re-work these modifiers.
10
10
 
11
- /**
12
- * Modifiers:
13
- * - format has been changed from object of objects, to array of objects, with the key for each
14
- * modifier replaced with a name key:value pair inside the modifier object
15
- * - modifier-specific options have been moved inside an options: key:value pair
16
- * - modifier options have been changed significantly: check the popper.js docs for more info
17
- */
18
- defineInlineTest(
19
- { default: transformer, parser: 'tsx' },
20
- {},
21
- `
11
+ /**
12
+ * Modifiers:
13
+ * - format has been changed from object of objects, to array of objects, with the key for each
14
+ * modifier replaced with a name key:value pair inside the modifier object
15
+ * - modifier-specific options have been moved inside an options: key:value pair
16
+ * - modifier options have been changed significantly: check the popper.js docs for more info
17
+ */
18
+ defineInlineTest(
19
+ { default: transformer, parser: 'tsx' },
20
+ {},
21
+ `
22
22
  import { Popper } from '@atlaskit/popper';
23
23
 
24
24
  export default () => {
@@ -40,7 +40,7 @@ describe('Changing popper usage', () => {
40
40
  </Popper>
41
41
  )};
42
42
  `,
43
- `
43
+ `
44
44
  /* TODO: (from codemod) Popper.js has been upgraded from 1.14.1 to 2.4.2,
45
45
  and as a result the modifier prop has changed significantly. The format has been
46
46
  changed from object of objects, to array of objects, with the key for each modifier
@@ -68,5 +68,5 @@ describe('Changing popper usage', () => {
68
68
  </Popper>
69
69
  );};
70
70
  `,
71
- );
71
+ );
72
72
  });
package/codemods/__tests__/update-offset-prop.tsx CHANGED
@@ -5,11 +5,11 @@ import transformer from '../5.0.0-lite-mode';
5
5
  const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
6
6
 
7
7
  describe('Update offset prop', () => {
8
- describe('offset as a string', () => {
9
- defineInlineTest(
10
- { default: transformer, parser: 'tsx' },
11
- {},
12
- `
8
+ describe('offset as a string', () => {
9
+ defineInlineTest(
10
+ { default: transformer, parser: 'tsx' },
11
+ {},
12
+ `
13
13
  import { Popper } from '@atlaskit/popper';
14
14
 
15
15
  export default () => (
@@ -23,7 +23,7 @@ describe('Update offset prop', () => {
23
23
  </Popper>
24
24
  );
25
25
  `,
26
- `
26
+ `
27
27
  import { Popper } from '@atlaskit/popper';
28
28
 
29
29
  export default () => (
@@ -37,13 +37,13 @@ describe('Update offset prop', () => {
37
37
  </Popper>
38
38
  );
39
39
  `,
40
- 'should convert string literal to array notation',
41
- );
40
+ 'should convert string literal to array notation',
41
+ );
42
42
 
43
- defineInlineTest(
44
- { default: transformer, parser: 'tsx' },
45
- {},
46
- `
43
+ defineInlineTest(
44
+ { default: transformer, parser: 'tsx' },
45
+ {},
46
+ `
47
47
  import { Popper } from '@atlaskit/popper';
48
48
 
49
49
  export default () => (
@@ -57,7 +57,7 @@ describe('Update offset prop', () => {
57
57
  </Popper>
58
58
  );
59
59
  `,
60
- `
60
+ `
61
61
  import { Popper } from '@atlaskit/popper';
62
62
 
63
63
  export default () => (
@@ -71,15 +71,15 @@ describe('Update offset prop', () => {
71
71
  </Popper>
72
72
  );
73
73
  `,
74
- 'should convert string literal to array notation - with comma',
75
- );
76
- });
74
+ 'should convert string literal to array notation - with comma',
75
+ );
76
+ });
77
77
 
78
- describe('offset as object expression', () => {
79
- defineInlineTest(
80
- { default: transformer, parser: 'tsx' },
81
- {},
82
- `
78
+ describe('offset as object expression', () => {
79
+ defineInlineTest(
80
+ { default: transformer, parser: 'tsx' },
81
+ {},
82
+ `
83
83
  import { Popper } from '@atlaskit/popper';
84
84
 
85
85
  export default () => (
@@ -93,7 +93,7 @@ describe('Update offset prop', () => {
93
93
  </Popper>
94
94
  );
95
95
  `,
96
- `
96
+ `
97
97
  import { Popper } from '@atlaskit/popper';
98
98
 
99
99
  export default () => (
@@ -107,13 +107,13 @@ describe('Update offset prop', () => {
107
107
  </Popper>
108
108
  );
109
109
  `,
110
- `should convert object to array notation`,
111
- );
110
+ `should convert object to array notation`,
111
+ );
112
112
 
113
- defineInlineTest(
114
- { default: transformer, parser: 'tsx' },
115
- {},
116
- `
113
+ defineInlineTest(
114
+ { default: transformer, parser: 'tsx' },
115
+ {},
116
+ `
117
117
  import { Popper } from '@atlaskit/popper';
118
118
 
119
119
  function numCommaOffset() {
@@ -129,7 +129,7 @@ describe('Update offset prop', () => {
129
129
  );
130
130
  }
131
131
  `,
132
- `
132
+ `
133
133
  import { Popper } from '@atlaskit/popper';
134
134
 
135
135
  function numCommaOffset() {
@@ -145,13 +145,13 @@ describe('Update offset prop', () => {
145
145
  );
146
146
  }
147
147
  `,
148
- `should convert number with comma as offset`,
149
- );
148
+ `should convert number with comma as offset`,
149
+ );
150
150
 
151
- defineInlineTest(
152
- { default: transformer, parser: 'tsx' },
153
- {},
154
- `
151
+ defineInlineTest(
152
+ { default: transformer, parser: 'tsx' },
153
+ {},
154
+ `
155
155
  import { Popper } from '@atlaskit/popper';
156
156
 
157
157
  function numStringOffset() {
@@ -167,7 +167,7 @@ describe('Update offset prop', () => {
167
167
  );
168
168
  }
169
169
  `,
170
- `
170
+ `
171
171
  import { Popper } from '@atlaskit/popper';
172
172
 
173
173
  function numStringOffset() {
@@ -183,13 +183,13 @@ describe('Update offset prop', () => {
183
183
  );
184
184
  }
185
185
  `,
186
- `should add default value as 0 when one offset is missing - string`,
187
- );
186
+ `should add default value as 0 when one offset is missing - string`,
187
+ );
188
188
 
189
- defineInlineTest(
190
- { default: transformer, parser: 'tsx' },
191
- {},
192
- `
189
+ defineInlineTest(
190
+ { default: transformer, parser: 'tsx' },
191
+ {},
192
+ `
193
193
  import { Popper } from '@atlaskit/popper';
194
194
 
195
195
  function numOffset() {
@@ -205,7 +205,7 @@ describe('Update offset prop', () => {
205
205
  );
206
206
  }
207
207
  `,
208
- `
208
+ `
209
209
  import { Popper } from '@atlaskit/popper';
210
210
 
211
211
  function numOffset() {
@@ -221,14 +221,14 @@ describe('Update offset prop', () => {
221
221
  );
222
222
  }
223
223
  `,
224
- `should add default value as 0 when one offset is missing - number`,
225
- );
226
- });
224
+ `should add default value as 0 when one offset is missing - number`,
225
+ );
226
+ });
227
227
 
228
- defineInlineTest(
229
- { default: transformer, parser: 'tsx' },
230
- {},
231
- `
228
+ defineInlineTest(
229
+ { default: transformer, parser: 'tsx' },
230
+ {},
231
+ `
232
232
  import { Popper } from '@atlaskit/popper';
233
233
 
234
234
  export default () => (
@@ -242,7 +242,7 @@ describe('Update offset prop', () => {
242
242
  </Popper>
243
243
  );
244
244
  `,
245
- `
245
+ `
246
246
  /* TODO: (from codemod) Popper.js has been upgraded from 1.14.1 to 2.4.2,
247
247
  and as a result the offset prop has changed to be an array. e.g '0px 8px' -> [0, 8]
248
248
  Along with this change you cannot use vw, vh or % units or addition or multiplication
@@ -261,17 +261,17 @@ describe('Update offset prop', () => {
261
261
  </Popper>
262
262
  );
263
263
  `,
264
- `should add correct document string for vh, vw and %`,
265
- );
264
+ `should add correct document string for vh, vw and %`,
265
+ );
266
266
 
267
- /**
268
- * If a user is passing in a variable for offset then we should leave a comment to
269
- * update it themselves
270
- */
271
- defineInlineTest(
272
- { default: transformer, parser: 'tsx' },
273
- {},
274
- `
267
+ /**
268
+ * If a user is passing in a variable for offset then we should leave a comment to
269
+ * update it themselves
270
+ */
271
+ defineInlineTest(
272
+ { default: transformer, parser: 'tsx' },
273
+ {},
274
+ `
275
275
  import { Popper } from '@atlaskit/popper';
276
276
 
277
277
  function directOffset({offset}) {
@@ -287,7 +287,7 @@ describe('Update offset prop', () => {
287
287
  );
288
288
  }
289
289
  `,
290
- `
290
+ `
291
291
  /* TODO: (from codemod) Popper.js has been upgraded from 1.14.1 to 2.4.2, and as a result the offset
292
292
  prop has changed to be an array. e.g '0px 8px' -> [0, 8]
293
293
  As you are using a variable, you will have change the offset prop manually
@@ -307,13 +307,13 @@ describe('Update offset prop', () => {
307
307
  );
308
308
  }
309
309
  `,
310
- `should add correct document string for variable`,
311
- );
310
+ `should add correct document string for variable`,
311
+ );
312
312
 
313
- defineInlineTest(
314
- { default: transformer, parser: 'tsx' },
315
- {},
316
- `
313
+ defineInlineTest(
314
+ { default: transformer, parser: 'tsx' },
315
+ {},
316
+ `
317
317
  import { Manager, Popper as Popeye } from '@atlaskit/popper';
318
318
 
319
319
  export default () => (
@@ -327,7 +327,7 @@ describe('Update offset prop', () => {
327
327
  </Popeye>
328
328
  );
329
329
  `,
330
- `
330
+ `
331
331
  import { Manager, Popper as Popeye } from '@atlaskit/popper';
332
332
 
333
333
  export default () => (
@@ -341,6 +341,6 @@ describe('Update offset prop', () => {
341
341
  </Popeye>
342
342
  );
343
343
  `,
344
- `should works with an aliased import and other imports`,
345
- );
344
+ `should works with an aliased import and other imports`,
345
+ );
346
346
  });