@atlaskit/primitives 14.2.2 → 14.3.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 (17) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/codemods/compiled-fork-stage1/transform.tsx +132 -2
  3. package/dist/cjs/compiled/components/anchor.js +2 -2
  4. package/dist/cjs/compiled/components/pressable.js +1 -1
  5. package/dist/cjs/components/anchor.js +2 -2
  6. package/dist/cjs/components/pressable.js +1 -1
  7. package/dist/es2019/compiled/components/anchor.js +2 -2
  8. package/dist/es2019/compiled/components/pressable.js +1 -1
  9. package/dist/es2019/components/anchor.js +2 -2
  10. package/dist/es2019/components/pressable.js +1 -1
  11. package/dist/esm/compiled/components/anchor.js +2 -2
  12. package/dist/esm/compiled/components/pressable.js +1 -1
  13. package/dist/esm/components/anchor.js +2 -2
  14. package/dist/esm/components/pressable.js +1 -1
  15. package/dist/types/compiled/components/inline.d.ts +2 -2
  16. package/dist/types-ts4.5/compiled/components/inline.d.ts +2 -2
  17. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 14.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#135655](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135655)
8
+ [`71f8afb32ade5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71f8afb32ade5) -
9
+ Anchor will no longer render as a RouterLink for urls that use the blob: protocol.
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 14.2.3
16
+
17
+ ### Patch Changes
18
+
19
+ - [#133540](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133540)
20
+ [`606c6a34e6c24`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/606c6a34e6c24) -
21
+ Fix type of `separator` in the Compiled variant of Inline.
22
+
3
23
  ## 14.2.2
4
24
 
5
25
  ### 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
@@ -31,7 +31,7 @@ var styles = {
31
31
  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi"
32
32
  };
33
33
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
34
- var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
34
+ var IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
35
35
 
36
36
  /**
37
37
  * __Anchor__
@@ -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.2",
73
+ packageVersion: "14.3.0",
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.2",
63
+ packageVersion: "14.3.0",
64
64
  analyticsData: analyticsContext,
65
65
  actionSubject: 'button'
66
66
  });
package/dist/cjs/components/anchor.js CHANGED
@@ -52,7 +52,7 @@ var baseStyles = (0, _react2.css)({
52
52
  textDecoration: 'underline'
53
53
  });
54
54
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
55
- var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
55
+ var IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
56
56
  // Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
57
57
  var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
58
58
 
@@ -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.2",
103
+ packageVersion: "14.3.0",
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.2",
98
+ packageVersion: "14.3.0",
99
99
  analyticsData: analyticsContext,
100
100
  actionSubject: 'button'
101
101
  });
package/dist/es2019/compiled/components/anchor.js CHANGED
@@ -17,7 +17,7 @@ const styles = {
17
17
  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi"
18
18
  };
19
19
  const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
20
- const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
20
+ const IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
21
21
 
22
22
  /**
23
23
  * __Anchor__
@@ -55,7 +55,7 @@ const AnchorNoRef = ({
55
55
  action: 'clicked',
56
56
  componentName: componentName || 'Anchor',
57
57
  packageName: "@atlaskit/primitives",
58
- packageVersion: "14.2.2",
58
+ packageVersion: "14.3.0",
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.2",
49
+ packageVersion: "14.3.0",
50
50
  analyticsData: analyticsContext,
51
51
  actionSubject: 'button'
52
52
  });
package/dist/es2019/components/anchor.js CHANGED
@@ -42,7 +42,7 @@ const baseStyles = css({
42
42
  textDecoration: 'underline'
43
43
  });
44
44
  const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
45
- const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
45
+ const IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
46
46
  // Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
47
47
  const OPENS_NEW_WINDOW_LABEL = '(opens new window)';
48
48
 
@@ -90,7 +90,7 @@ const AnchorNoRef = ({
90
90
  action: 'clicked',
91
91
  componentName: componentName || 'Anchor',
92
92
  packageName: "@atlaskit/primitives",
93
- packageVersion: "14.2.2",
93
+ packageVersion: "14.3.0",
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.2",
88
+ packageVersion: "14.3.0",
89
89
  analyticsData: analyticsContext,
90
90
  actionSubject: 'button'
91
91
  });
package/dist/esm/compiled/components/anchor.js CHANGED
@@ -21,7 +21,7 @@ var styles = {
21
21
  root: "_4bfu1r31 _1hms8stv _ajmmnqa1 _vchhusvi"
22
22
  };
23
23
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
24
- var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
24
+ var IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
25
25
 
26
26
  /**
27
27
  * __Anchor__
@@ -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.2",
63
+ packageVersion: "14.3.0",
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.2",
53
+ packageVersion: "14.3.0",
54
54
  analyticsData: analyticsContext,
55
55
  actionSubject: 'button'
56
56
  });
package/dist/esm/components/anchor.js CHANGED
@@ -46,7 +46,7 @@ var baseStyles = css({
46
46
  textDecoration: 'underline'
47
47
  });
48
48
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
49
- var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
49
+ var IS_NON_HTTP_BASED = /^(((mailto|tel|sms|blob):)|(#))/;
50
50
  // Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
51
51
  var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
52
52
 
@@ -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.2",
97
+ packageVersion: "14.3.0",
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.2",
92
+ packageVersion: "14.3.0",
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.2",
3
+ "version": "14.3.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -125,12 +125,12 @@
125
125
  },
126
126
  "dependencies": {
127
127
  "@atlaskit/analytics-next": "^11.0.0",
128
- "@atlaskit/app-provider": "^2.0.0",
128
+ "@atlaskit/app-provider": "^2.1.0",
129
129
  "@atlaskit/css": "^0.10.0",
130
130
  "@atlaskit/ds-lib": "^4.0.0",
131
131
  "@atlaskit/interaction-context": "^3.0.0",
132
132
  "@atlaskit/platform-feature-flags": "^1.1.0",
133
- "@atlaskit/tokens": "^4.5.0",
133
+ "@atlaskit/tokens": "^4.6.0",
134
134
  "@atlaskit/visually-hidden": "^3.0.0",
135
135
  "@babel/runtime": "^7.0.0",
136
136
  "@compiled/react": "^0.18.3",
@@ -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": "^23.0.0",
152
152
  "@atlaskit/checkbox": "^17.0.0",
153
- "@atlaskit/code": "^16.1.0",
153
+ "@atlaskit/code": "^16.2.0",
154
154
  "@atlaskit/docs": "^10.0.0",
155
- "@atlaskit/dropdown-menu": "^13.0.0",
155
+ "@atlaskit/dropdown-menu": "^14.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.4.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.16.1",
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",