@atlaskit/primitives 14.2.1 → 14.2.3

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 (21) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/codemods/compiled-fork-stage1/transform.tsx +132 -2
  3. package/constellation/overview/images/box-usage-example.png +0 -0
  4. package/constellation/overview/images/inline-usage-example.png +0 -0
  5. package/constellation/overview/images/stack-usage-example.png +0 -0
  6. package/constellation/pressable/images/pressable-anatomy.png +0 -0
  7. package/dist/cjs/compiled/components/anchor.js +1 -1
  8. package/dist/cjs/compiled/components/pressable.js +1 -1
  9. package/dist/cjs/components/anchor.js +1 -1
  10. package/dist/cjs/components/pressable.js +1 -1
  11. package/dist/es2019/compiled/components/anchor.js +1 -1
  12. package/dist/es2019/compiled/components/pressable.js +1 -1
  13. package/dist/es2019/components/anchor.js +1 -1
  14. package/dist/es2019/components/pressable.js +1 -1
  15. package/dist/esm/compiled/components/anchor.js +1 -1
  16. package/dist/esm/compiled/components/pressable.js +1 -1
  17. package/dist/esm/components/anchor.js +1 -1
  18. package/dist/esm/components/pressable.js +1 -1
  19. package/dist/types/compiled/components/inline.d.ts +2 -2
  20. package/dist/types-ts4.5/compiled/components/inline.d.ts +2 -2
  21. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 14.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#133540](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133540)
8
+ [`606c6a34e6c24`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/606c6a34e6c24) -
9
+ Fix type of `separator` in the Compiled variant of Inline.
10
+
11
+ ## 14.2.2
12
+
13
+ ### Patch Changes
14
+
15
+ - [#127093](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127093)
16
+ [`1378ea7a99ce1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1378ea7a99ce1) -
17
+ Upgrades `jscodeshift` to handle generics properly.
18
+ - Updated dependencies
19
+
3
20
  ## 14.2.1
4
21
 
5
22
  ### Patch Changes
package/codemods/compiled-fork-stage1/transform.tsx CHANGED
@@ -1,7 +1,21 @@
1
- import type { API, FileInfo } from 'jscodeshift';
1
+ import type { API, FileInfo, JSXAttribute } from 'jscodeshift';
2
2
 
3
- function transform(file: FileInfo, { j }: API) {
3
+ const ANCHOR_XCSS_PROPS = [
4
+ 'backgroundColor',
5
+ 'padding',
6
+ 'paddingBlock',
7
+ 'paddingBlockStart',
8
+ 'paddingBlockEnd',
9
+ 'paddingInline',
10
+ 'paddingInlineStart',
11
+ 'paddingInlineEnd',
12
+ ];
13
+
14
+ const GRID_XCSS_PROPS = ['templateRows', 'templateColumns', 'templateAreas'];
15
+
16
+ function transform(file: FileInfo, { jscodeshift: j }: API) {
4
17
  const root = j(file.source);
18
+ let needsCssMapImport = false;
5
19
 
6
20
  // Find all import declarations from '@atlaskit/primitives'
7
21
  root.find(j.ImportDeclaration, { source: { value: '@atlaskit/primitives' } }).forEach((path) => {
@@ -20,6 +34,122 @@ function transform(file: FileInfo, { j }: API) {
20
34
  }
21
35
  });
22
36
 
37
+ // Find existing cssMap import or alias
38
+ let cssMapName = 'cssMap';
39
+ const cssMapImport = root.find(j.ImportDeclaration, {
40
+ source: { value: '@atlaskit/css' },
41
+ });
42
+
43
+ if (cssMapImport.length > 0) {
44
+ const cssMapSpecifier = cssMapImport.find(j.ImportSpecifier, {
45
+ imported: { name: 'cssMap' },
46
+ });
47
+ if (cssMapSpecifier.length > 0) {
48
+ cssMapName = cssMapSpecifier.get(0).node.local?.name || 'cssMap';
49
+ }
50
+ }
51
+
52
+ // Find JSX elements for Grid and Anchor
53
+ root.find(j.JSXElement).forEach((path) => {
54
+ if (!j.JSXIdentifier.check(path.node.openingElement.name)) {
55
+ return;
56
+ }
57
+
58
+ const elementName = path.node.openingElement.name.name;
59
+ if (elementName !== 'Grid' && elementName !== 'Anchor') {
60
+ return;
61
+ }
62
+
63
+ const attributes = path.node.openingElement.attributes || [];
64
+ const props = attributes.filter((attr) => j.JSXAttribute.check(attr)) as Array<JSXAttribute>;
65
+
66
+ const xcssProps = elementName === 'Grid' ? GRID_XCSS_PROPS : ANCHOR_XCSS_PROPS;
67
+ const propsToTransform = props.filter(
68
+ (prop) => j.JSXIdentifier.check(prop.name) && xcssProps.includes(prop.name.name),
69
+ );
70
+
71
+ if (propsToTransform.length === 0) {
72
+ return;
73
+ }
74
+
75
+ needsCssMapImport = true;
76
+
77
+ // Create styles variable name
78
+ const stylesName = `${elementName.toLowerCase()}Styles`;
79
+
80
+ // Create cssMap declaration
81
+ const styleObj = j.objectExpression(
82
+ propsToTransform.map((prop) =>
83
+ // @ts-expect-error
84
+ j.objectProperty(j.identifier(prop.name.name as string), prop.value),
85
+ ),
86
+ );
87
+
88
+ const cssMapDecl = j.variableDeclaration('const', [
89
+ j.variableDeclarator(
90
+ j.identifier(stylesName),
91
+ j.callExpression(j.identifier(cssMapName), [
92
+ j.objectExpression([j.objectProperty(j.identifier('root'), styleObj)]),
93
+ ]),
94
+ ),
95
+ ]);
96
+
97
+ const importDeclaration = root.find(j.ImportDeclaration, {
98
+ source: { value: '@atlaskit/primitives/compiled' },
99
+ });
100
+
101
+ if (importDeclaration.length > 0) {
102
+ // insert after the last import declaration
103
+ const imports = root.find(j.ImportDeclaration);
104
+ const lastImport = imports.at(imports.length - 1);
105
+
106
+ const cssMapDeclaration = root
107
+ .find(j.VariableDeclaration)
108
+ // @ts-expect-error
109
+ .filter((path) => path.node.declarations[0].id.name === stylesName);
110
+
111
+ if (lastImport && !cssMapDeclaration.length) {
112
+ lastImport.insertAfter(cssMapDecl);
113
+ }
114
+ }
115
+
116
+ // Remove transformed props and add xcss prop
117
+ propsToTransform.forEach((prop) => {
118
+ const index = attributes.indexOf(prop);
119
+ attributes.splice(index, 1);
120
+ });
121
+
122
+ const existingXcss = props.find(
123
+ (prop) => j.JSXIdentifier.check(prop.name) && prop.name.name === 'xcss',
124
+ );
125
+
126
+ const xcssValue = existingXcss
127
+ ? j.arrayExpression([
128
+ j.memberExpression(j.identifier(stylesName), j.identifier('root')),
129
+ // @ts-expect-error
130
+ existingXcss.value.expression,
131
+ ])
132
+ : j.memberExpression(j.identifier(stylesName), j.identifier('root'));
133
+
134
+ if (existingXcss) {
135
+ existingXcss.value = j.jsxExpressionContainer(xcssValue);
136
+ } else {
137
+ attributes.push(j.jsxAttribute(j.jsxIdentifier('xcss'), j.jsxExpressionContainer(xcssValue)));
138
+ }
139
+ });
140
+
141
+ // Add cssMap import if needed
142
+ if (needsCssMapImport && cssMapImport.length === 0) {
143
+ root
144
+ .get()
145
+ .node.program.body.unshift(
146
+ j.importDeclaration(
147
+ [j.importSpecifier(j.identifier('cssMap'))],
148
+ j.literal('@atlaskit/css'),
149
+ ),
150
+ );
151
+ }
152
+
23
153
  return root.toSource();
24
154
  }
25
155
 
package/dist/cjs/compiled/components/anchor.js CHANGED
@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
70
70
  action: 'clicked',
71
71
  componentName: componentName || 'Anchor',
72
72
  packageName: "@atlaskit/primitives",
73
- packageVersion: "14.2.1",
73
+ packageVersion: "14.2.3",
74
74
  analyticsData: analyticsContext,
75
75
  actionSubject: 'link'
76
76
  });
package/dist/cjs/compiled/components/pressable.js CHANGED
@@ -60,7 +60,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
60
60
  action: 'clicked',
61
61
  componentName: componentName || 'Pressable',
62
62
  packageName: "@atlaskit/primitives",
63
- packageVersion: "14.2.1",
63
+ packageVersion: "14.2.3",
64
64
  analyticsData: analyticsContext,
65
65
  actionSubject: 'button'
66
66
  });
package/dist/cjs/components/anchor.js CHANGED
@@ -100,7 +100,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
100
100
  action: 'clicked',
101
101
  componentName: componentName || 'Anchor',
102
102
  packageName: "@atlaskit/primitives",
103
- packageVersion: "14.2.1",
103
+ packageVersion: "14.2.3",
104
104
  analyticsData: analyticsContext,
105
105
  actionSubject: 'link'
106
106
  });
package/dist/cjs/components/pressable.js CHANGED
@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
95
95
  action: 'clicked',
96
96
  componentName: componentName || 'Pressable',
97
97
  packageName: "@atlaskit/primitives",
98
- packageVersion: "14.2.1",
98
+ packageVersion: "14.2.3",
99
99
  analyticsData: analyticsContext,
100
100
  actionSubject: 'button'
101
101
  });
package/dist/es2019/compiled/components/anchor.js CHANGED
@@ -55,7 +55,7 @@ const AnchorNoRef = ({
55
55
  action: 'clicked',
56
56
  componentName: componentName || 'Anchor',
57
57
  packageName: "@atlaskit/primitives",
58
- packageVersion: "14.2.1",
58
+ packageVersion: "14.2.3",
59
59
  analyticsData: analyticsContext,
60
60
  actionSubject: 'link'
61
61
  });
package/dist/es2019/compiled/components/pressable.js CHANGED
@@ -46,7 +46,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
46
46
  action: 'clicked',
47
47
  componentName: componentName || 'Pressable',
48
48
  packageName: "@atlaskit/primitives",
49
- packageVersion: "14.2.1",
49
+ packageVersion: "14.2.3",
50
50
  analyticsData: analyticsContext,
51
51
  actionSubject: 'button'
52
52
  });
package/dist/es2019/components/anchor.js CHANGED
@@ -90,7 +90,7 @@ const AnchorNoRef = ({
90
90
  action: 'clicked',
91
91
  componentName: componentName || 'Anchor',
92
92
  packageName: "@atlaskit/primitives",
93
- packageVersion: "14.2.1",
93
+ packageVersion: "14.2.3",
94
94
  analyticsData: analyticsContext,
95
95
  actionSubject: 'link'
96
96
  });
package/dist/es2019/components/pressable.js CHANGED
@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
85
85
  action: 'clicked',
86
86
  componentName: componentName || 'Pressable',
87
87
  packageName: "@atlaskit/primitives",
88
- packageVersion: "14.2.1",
88
+ packageVersion: "14.2.3",
89
89
  analyticsData: analyticsContext,
90
90
  actionSubject: 'button'
91
91
  });
package/dist/esm/compiled/components/anchor.js CHANGED
@@ -60,7 +60,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
60
60
  action: 'clicked',
61
61
  componentName: componentName || 'Anchor',
62
62
  packageName: "@atlaskit/primitives",
63
- packageVersion: "14.2.1",
63
+ packageVersion: "14.2.3",
64
64
  analyticsData: analyticsContext,
65
65
  actionSubject: 'link'
66
66
  });
package/dist/esm/compiled/components/pressable.js CHANGED
@@ -50,7 +50,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
50
50
  action: 'clicked',
51
51
  componentName: componentName || 'Pressable',
52
52
  packageName: "@atlaskit/primitives",
53
- packageVersion: "14.2.1",
53
+ packageVersion: "14.2.3",
54
54
  analyticsData: analyticsContext,
55
55
  actionSubject: 'button'
56
56
  });
package/dist/esm/components/anchor.js CHANGED
@@ -94,7 +94,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
94
94
  action: 'clicked',
95
95
  componentName: componentName || 'Anchor',
96
96
  packageName: "@atlaskit/primitives",
97
- packageVersion: "14.2.1",
97
+ packageVersion: "14.2.3",
98
98
  analyticsData: analyticsContext,
99
99
  actionSubject: 'link'
100
100
  });
package/dist/esm/components/pressable.js CHANGED
@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
89
89
  action: 'clicked',
90
90
  componentName: componentName || 'Pressable',
91
91
  packageName: "@atlaskit/primitives",
92
- packageVersion: "14.2.1",
92
+ packageVersion: "14.2.3",
93
93
  analyticsData: analyticsContext,
94
94
  actionSubject: 'button'
95
95
  });
package/dist/types/compiled/components/inline.d.ts CHANGED
@@ -40,9 +40,9 @@ export type InlineProps<T extends ElementType = 'div'> = {
40
40
  */
41
41
  rowSpace?: FlexProps['rowGap'];
42
42
  /**
43
- * Renders a separator string between each child.
43
+ * Renders a separator string between each child. Avoid using `separator="•"` when `as="ul" | "ol" | "dl"` to preserve proper list semantics.
44
44
  */
45
- separator?: string;
45
+ separator?: ReactNode;
46
46
  /**
47
47
  * Elements to be rendered inside the Inline.
48
48
  */
package/dist/types-ts4.5/compiled/components/inline.d.ts CHANGED
@@ -40,9 +40,9 @@ export type InlineProps<T extends ElementType = 'div'> = {
40
40
  */
41
41
  rowSpace?: FlexProps['rowGap'];
42
42
  /**
43
- * Renders a separator string between each child.
43
+ * Renders a separator string between each child. Avoid using `separator="•"` when `as="ul" | "ol" | "dl"` to preserve proper list semantics.
44
44
  */
45
- separator?: string;
45
+ separator?: ReactNode;
46
46
  /**
47
47
  * Elements to be rendered inside the Inline.
48
48
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "14.2.1",
3
+ "version": "14.2.3",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -148,34 +148,34 @@
148
148
  "@af/integration-testing": "^0.5.0",
149
149
  "@af/visual-regression": "^1.3.0",
150
150
  "@atlaskit/avatar": "^25.0.0",
151
- "@atlaskit/button": "^21.1.0",
151
+ "@atlaskit/button": "^22.0.0",
152
152
  "@atlaskit/checkbox": "^17.0.0",
153
- "@atlaskit/code": "^16.0.0",
153
+ "@atlaskit/code": "^16.1.0",
154
154
  "@atlaskit/docs": "^10.0.0",
155
155
  "@atlaskit/dropdown-menu": "^13.0.0",
156
156
  "@atlaskit/flag": "^17.1.0",
157
157
  "@atlaskit/form": "^12.0.0",
158
158
  "@atlaskit/heading": "^5.1.0",
159
- "@atlaskit/icon": "^25.0.0",
159
+ "@atlaskit/icon": "^25.2.0",
160
160
  "@atlaskit/icon-object": "^7.0.0",
161
- "@atlaskit/image": "^2.0.0",
162
- "@atlaskit/link": "^3.0.0",
161
+ "@atlaskit/image": "^3.0.0",
162
+ "@atlaskit/link": "^3.1.0",
163
163
  "@atlaskit/logo": "^16.0.0",
164
164
  "@atlaskit/lozenge": "^12.2.0",
165
165
  "@atlaskit/motion": "^5.1.0",
166
166
  "@atlaskit/range": "^9.0.0",
167
167
  "@atlaskit/section-message": "^8.2.0",
168
- "@atlaskit/ssr": "^0.4.0",
169
168
  "@atlaskit/textfield": "^8.0.0",
170
169
  "@atlaskit/toggle": "^15.0.0",
171
170
  "@atlaskit/tooltip": "^20.0.0",
172
171
  "@atlaskit/visual-regression": "^0.10.0",
173
172
  "@atlassian/analytics-bridge": "^0.7.0",
174
173
  "@atlassian/codegen": "^0.1.0",
174
+ "@atlassian/ssr-tests": "^0.2.0",
175
175
  "@testing-library/react": "^13.4.0",
176
176
  "@testing-library/react-hooks": "^8.0.1",
177
177
  "csstype": "^3.1.0",
178
- "jscodeshift": "^0.13.0",
178
+ "jscodeshift": "^17.0.0",
179
179
  "react-dom": "^18.2.0",
180
180
  "react-resource-router": "^0.20.0",
181
181
  "ts-node": "^10.9.1",