@atlaskit/popup 1.17.2 → 1.18.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.
- package/CHANGELOG.md +441 -432
- package/__perf__/closed.tsx +30 -30
- package/__perf__/default.tsx +19 -19
- package/__perf__/open.tsx +19 -23
- package/__perf__/popup.tsx +26 -26
- package/__perf__/utils/interaction-tasks.tsx +37 -50
- package/codemods/1.0.0-lite-mode.tsx +148 -181
- package/codemods/__tests__/1.0.0-lite-mode.tsx +88 -88
- package/codemods/utils/helpers.tsx +250 -261
- package/dist/cjs/popper-wrapper.js +15 -6
- package/dist/cjs/popup.js +17 -4
- package/dist/es2019/popper-wrapper.js +15 -5
- package/dist/es2019/popup.js +16 -4
- package/dist/esm/popper-wrapper.js +16 -6
- package/dist/esm/popup.js +17 -4
- package/dist/types/compositional/popup.d.ts +1 -1
- package/dist/types/entry-points/experimental/compositional.d.ts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/popper-wrapper.d.ts +1 -1
- package/dist/types/reposition-on-update.d.ts +1 -1
- package/dist/types/types.d.ts +24 -1
- package/dist/types-ts4.5/compositional/popup.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/experimental/compositional.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/popper-wrapper.d.ts +1 -1
- package/dist/types-ts4.5/reposition-on-update.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +24 -1
- package/package.json +117 -118
- package/report.api.md +41 -40
|
@@ -1,211 +1,178 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
10
|
} from 'jscodeshift';
|
|
11
11
|
import { type Collection } from 'jscodeshift/src/Collection';
|
|
12
12
|
|
|
13
13
|
import {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
addCommentToStartOfFile,
|
|
15
|
+
getDefaultSpecifierName,
|
|
16
|
+
getJSXAttributesByName,
|
|
17
|
+
getSpecifierName,
|
|
18
|
+
hasImportDeclaration,
|
|
19
|
+
isUsingProp,
|
|
20
|
+
updateRenderProps,
|
|
21
21
|
} from './utils/helpers';
|
|
22
22
|
|
|
23
|
-
function updateBoundariesProps(
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
),
|
|
59
|
-
);
|
|
60
|
-
} else if (value === 'scrollParents') {
|
|
61
|
-
j(attribute).replaceWith(
|
|
62
|
-
j.jsxAttribute(
|
|
63
|
-
j.jsxIdentifier('boundary'),
|
|
64
|
-
j.stringLiteral('clippingParents'),
|
|
65
|
-
),
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
// Add relevant replacement props
|
|
23
|
+
function updateBoundariesProps(j: core.JSCodeshift, source: Collection<any>, specifier: string) {
|
|
24
|
+
source.findJSXElements(specifier).forEach((path: ASTPath<JSXElement>) => {
|
|
25
|
+
if (
|
|
26
|
+
isUsingProp({
|
|
27
|
+
j,
|
|
28
|
+
base: source,
|
|
29
|
+
element: path,
|
|
30
|
+
propName: 'boundariesElement',
|
|
31
|
+
})
|
|
32
|
+
) {
|
|
33
|
+
// Get value from prop
|
|
34
|
+
getJSXAttributesByName({
|
|
35
|
+
j,
|
|
36
|
+
element: path,
|
|
37
|
+
attributeName: 'boundariesElement',
|
|
38
|
+
}).forEach((attribute) => {
|
|
39
|
+
const expression = attribute.node.value;
|
|
40
|
+
if (expression && expression.type === 'StringLiteral') {
|
|
41
|
+
const value = expression && expression.value;
|
|
42
|
+
if (value === 'window') {
|
|
43
|
+
j(attribute).replaceWith(
|
|
44
|
+
j.jsxAttribute(j.jsxIdentifier('rootBoundary'), j.stringLiteral('document')),
|
|
45
|
+
);
|
|
46
|
+
} else if (value === 'viewport') {
|
|
47
|
+
j(attribute).replaceWith(
|
|
48
|
+
j.jsxAttribute(j.jsxIdentifier('rootBoundary'), j.stringLiteral('viewport')),
|
|
49
|
+
);
|
|
50
|
+
} else if (value === 'scrollParents') {
|
|
51
|
+
j(attribute).replaceWith(
|
|
52
|
+
j.jsxAttribute(j.jsxIdentifier('boundary'), j.stringLiteral('clippingParents')),
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
// Add relevant replacement props
|
|
71
58
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
59
|
+
// Remove old prop
|
|
60
|
+
getJSXAttributesByName({
|
|
61
|
+
j,
|
|
62
|
+
element: path,
|
|
63
|
+
attributeName: 'boundariesElement',
|
|
64
|
+
}).remove();
|
|
65
|
+
}
|
|
66
|
+
});
|
|
80
67
|
}
|
|
81
68
|
|
|
82
|
-
function updateOffset(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
value.includes('%') ||
|
|
103
|
-
value.includes('vw') ||
|
|
104
|
-
value.includes('vh')
|
|
105
|
-
) {
|
|
106
|
-
addCommentToStartOfFile({
|
|
107
|
-
j,
|
|
108
|
-
base: source,
|
|
109
|
-
message: `
|
|
69
|
+
function updateOffset(j: core.JSCodeshift, source: Collection<any>, specifier: string) {
|
|
70
|
+
source.findJSXElements(specifier).forEach((path: ASTPath<JSXElement>) => {
|
|
71
|
+
getJSXAttributesByName({
|
|
72
|
+
j,
|
|
73
|
+
element: path,
|
|
74
|
+
attributeName: 'offset',
|
|
75
|
+
})
|
|
76
|
+
.find(JSXExpressionContainer)
|
|
77
|
+
.forEach((attribute) => {
|
|
78
|
+
const expression = attribute.value.expression;
|
|
79
|
+
if (expression.type === 'StringLiteral') {
|
|
80
|
+
const value = expression.value;
|
|
81
|
+
// Not testing for cases like '10 + 10%' because I assume if you're
|
|
82
|
+
// adding or taking numbers it's with units that are not supported
|
|
83
|
+
// and will be picked up by the first case
|
|
84
|
+
if (value.includes('%') || value.includes('vw') || value.includes('vh')) {
|
|
85
|
+
addCommentToStartOfFile({
|
|
86
|
+
j,
|
|
87
|
+
base: source,
|
|
88
|
+
message: `
|
|
110
89
|
Popper.js has been upgraded from 1.14.1 to 2.4.2,
|
|
111
90
|
and as a result the offset prop has changed to be an array. e.g '0px 8px' -> [0, 8]
|
|
112
91
|
Along with this change you cannot use vw, vh or % units or addition or multiplication
|
|
113
92
|
Change the offset value to use pixel values
|
|
114
93
|
Further details can be found in the popper docs https://popper.js.org/docs/v2/modifiers/offset/
|
|
115
94
|
`,
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
),
|
|
152
|
-
);
|
|
153
|
-
} else if (expression.type === 'Identifier') {
|
|
154
|
-
// If there is a variable add this comment
|
|
155
|
-
addCommentToStartOfFile({
|
|
156
|
-
j,
|
|
157
|
-
base: source,
|
|
158
|
-
message: `
|
|
95
|
+
});
|
|
96
|
+
} else if (value.includes(',')) {
|
|
97
|
+
// Split by comma
|
|
98
|
+
const offsetArray: Literal[] = expression.value
|
|
99
|
+
.split(',')
|
|
100
|
+
//@ts-ignore
|
|
101
|
+
.map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
|
|
102
|
+
if (offsetArray.length === 2) {
|
|
103
|
+
j(attribute).replaceWith(j.jsxExpressionContainer(j.arrayExpression(offsetArray)));
|
|
104
|
+
}
|
|
105
|
+
} else {
|
|
106
|
+
// Split by space but check if it is a single number
|
|
107
|
+
const offsetArray: Literal[] = expression.value
|
|
108
|
+
.split(' ')
|
|
109
|
+
.filter((elem) => elem.length)
|
|
110
|
+
.map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
|
|
111
|
+
if (offsetArray.length === 2) {
|
|
112
|
+
j(attribute).replaceWith(j.jsxExpressionContainer(j.arrayExpression(offsetArray)));
|
|
113
|
+
} else if (offsetArray.length === 1) {
|
|
114
|
+
j(attribute).replaceWith(
|
|
115
|
+
j.jsxExpressionContainer(j.arrayExpression([offsetArray[0], j.literal(0)])),
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
} else if (expression.type === 'NumericLiteral') {
|
|
120
|
+
// If it is a single number convert to [number, 0]
|
|
121
|
+
j(attribute).replaceWith(
|
|
122
|
+
j.jsxExpressionContainer(j.arrayExpression([expression, j.literal(0)])),
|
|
123
|
+
);
|
|
124
|
+
} else if (expression.type === 'Identifier') {
|
|
125
|
+
// If there is a variable add this comment
|
|
126
|
+
addCommentToStartOfFile({
|
|
127
|
+
j,
|
|
128
|
+
base: source,
|
|
129
|
+
message: `
|
|
159
130
|
Popper.js has been upgraded from 1.14.1 to 2.4.2, and as a result the offset
|
|
160
131
|
prop has changed to be an array. e.g '0px 8px' -> [0, 8]
|
|
161
132
|
As you are using a variable, you will have change the offset prop manually
|
|
162
133
|
Further details can be found in the popper docs https://popper.js.org/docs/v2/modifiers/offset/
|
|
163
134
|
`,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
});
|
|
168
139
|
}
|
|
169
140
|
|
|
170
|
-
export default function transformer(
|
|
171
|
-
|
|
172
|
-
{ jscodeshift: j }: API,
|
|
173
|
-
options: Options,
|
|
174
|
-
) {
|
|
175
|
-
const source = j(file.source);
|
|
141
|
+
export default function transformer(file: FileInfo, { jscodeshift: j }: API, options: Options) {
|
|
142
|
+
const source = j(file.source);
|
|
176
143
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
144
|
+
// Exit early if not relevant
|
|
145
|
+
// We are doing this so we don't touch the formatting of unrelated files
|
|
146
|
+
if (!hasImportDeclaration(j, file.source, '@atlaskit/popup')) {
|
|
147
|
+
return file.source;
|
|
148
|
+
}
|
|
182
149
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
150
|
+
// Get imported name for the component
|
|
151
|
+
var specifier = getDefaultSpecifierName({
|
|
152
|
+
j,
|
|
153
|
+
base: source,
|
|
154
|
+
packageName: '@atlaskit/popup',
|
|
155
|
+
});
|
|
156
|
+
if (!specifier) {
|
|
157
|
+
specifier = getSpecifierName({
|
|
158
|
+
j,
|
|
159
|
+
base: source,
|
|
160
|
+
packageName: '@atlaskit/popup',
|
|
161
|
+
component: 'Popup',
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
if (!specifier) {
|
|
165
|
+
return file.source;
|
|
166
|
+
}
|
|
200
167
|
|
|
201
|
-
|
|
202
|
-
|
|
168
|
+
// Convert boundaries prop
|
|
169
|
+
updateBoundariesProps(j, source, specifier);
|
|
203
170
|
|
|
204
|
-
|
|
205
|
-
|
|
171
|
+
// Convert offset prop
|
|
172
|
+
updateOffset(j, source, specifier);
|
|
206
173
|
|
|
207
|
-
|
|
208
|
-
|
|
174
|
+
// Rename render props
|
|
175
|
+
updateRenderProps(j, source, specifier, 'scheduleUpdate', 'update');
|
|
209
176
|
|
|
210
|
-
|
|
177
|
+
return source.toSource(options.printOptions || { quote: 'single' });
|
|
211
178
|
}
|