@atlaskit/primitives 7.1.0 → 7.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 7.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#108733](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108733)
8
+ [`c414bbde52951`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c414bbde52951) -
9
+ Extends XCSS type to support `:focus:not(:focus-visible)`
10
+
11
+ ### Patch Changes
12
+
13
+ - [#108733](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108733)
14
+ [`c414bbde52951`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c414bbde52951) -
15
+ Adds a `:focus` style reset to `Anchor` and `Pressable` to prevent `:focus` styles with lower
16
+ specificity from leaking through.
17
+
3
18
  ## 7.1.0
4
19
 
5
20
  ### Minor Changes
@@ -35,10 +35,13 @@ var defaultStyles = (0, _xcss.xcss)({
35
35
  textDecoration: 'underline'
36
36
  });
37
37
  var focusRingStyles = (0, _xcss.xcss)({
38
- ':focus-visible': baseFocusRingStyles,
39
- '@supports not selector(*:focus-visible)': {
40
- ':focus': baseFocusRingStyles
38
+ // Focus styles used when :focus-visible isn't supported
39
+ ':focus': baseFocusRingStyles,
40
+ // Remove default focus styles for mouse interactions if :focus-visible is supported
41
+ ':focus:not(:focus-visible)': {
42
+ outline: 'none'
41
43
  },
44
+ ':focus-visible': baseFocusRingStyles,
42
45
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
43
46
  ':focus-visible': {
44
47
  outline: '1px solid'
@@ -85,7 +88,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
85
88
  action: 'clicked',
86
89
  componentName: componentName || 'Anchor',
87
90
  packageName: "@atlaskit/primitives",
88
- packageVersion: "7.1.0",
91
+ packageVersion: "7.2.0",
89
92
  analyticsData: analyticsContext,
90
93
  actionSubject: 'link'
91
94
  });
@@ -27,10 +27,13 @@ var baseFocusRingStyles = {
27
27
  outlineOffset: 'space.025'
28
28
  };
29
29
  var focusRingStyles = (0, _xcss.xcss)({
30
- ':focus-visible': baseFocusRingStyles,
31
- '@supports not selector(*:focus-visible)': {
32
- ':focus': baseFocusRingStyles
30
+ // Focus styles used when :focus-visible isn't supported
31
+ ':focus': baseFocusRingStyles,
32
+ // Remove default focus styles for mouse interactions if :focus-visible is supported
33
+ ':focus:not(:focus-visible)': {
34
+ outline: 'none'
33
35
  },
36
+ ':focus-visible': baseFocusRingStyles,
34
37
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
35
38
  ':focus-visible': {
36
39
  outline: '1px solid'
@@ -78,7 +81,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
78
81
  action: 'clicked',
79
82
  componentName: componentName || 'Pressable',
80
83
  packageName: "@atlaskit/primitives",
81
- packageVersion: "7.1.0",
84
+ packageVersion: "7.2.0",
82
85
  analyticsData: analyticsContext,
83
86
  actionSubject: 'button'
84
87
  });
@@ -21,10 +21,13 @@ const defaultStyles = xcss({
21
21
  textDecoration: 'underline'
22
22
  });
23
23
  const focusRingStyles = xcss({
24
- ':focus-visible': baseFocusRingStyles,
25
- '@supports not selector(*:focus-visible)': {
26
- ':focus': baseFocusRingStyles
24
+ // Focus styles used when :focus-visible isn't supported
25
+ ':focus': baseFocusRingStyles,
26
+ // Remove default focus styles for mouse interactions if :focus-visible is supported
27
+ ':focus:not(:focus-visible)': {
28
+ outline: 'none'
27
29
  },
30
+ ':focus-visible': baseFocusRingStyles,
28
31
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
29
32
  ':focus-visible': {
30
33
  outline: '1px solid'
@@ -71,7 +74,7 @@ const AnchorNoRef = ({
71
74
  action: 'clicked',
72
75
  componentName: componentName || 'Anchor',
73
76
  packageName: "@atlaskit/primitives",
74
- packageVersion: "7.1.0",
77
+ packageVersion: "7.2.0",
75
78
  analyticsData: analyticsContext,
76
79
  actionSubject: 'link'
77
80
  });
@@ -14,10 +14,13 @@ const baseFocusRingStyles = {
14
14
  outlineOffset: 'space.025'
15
15
  };
16
16
  const focusRingStyles = xcss({
17
- ':focus-visible': baseFocusRingStyles,
18
- '@supports not selector(*:focus-visible)': {
19
- ':focus': baseFocusRingStyles
17
+ // Focus styles used when :focus-visible isn't supported
18
+ ':focus': baseFocusRingStyles,
19
+ // Remove default focus styles for mouse interactions if :focus-visible is supported
20
+ ':focus:not(:focus-visible)': {
21
+ outline: 'none'
20
22
  },
23
+ ':focus-visible': baseFocusRingStyles,
21
24
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
22
25
  ':focus-visible': {
23
26
  outline: '1px solid'
@@ -64,7 +67,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
64
67
  action: 'clicked',
65
68
  componentName: componentName || 'Pressable',
66
69
  packageName: "@atlaskit/primitives",
67
- packageVersion: "7.1.0",
70
+ packageVersion: "7.2.0",
68
71
  analyticsData: analyticsContext,
69
72
  actionSubject: 'button'
70
73
  });
@@ -25,10 +25,13 @@ var defaultStyles = xcss({
25
25
  textDecoration: 'underline'
26
26
  });
27
27
  var focusRingStyles = xcss({
28
- ':focus-visible': baseFocusRingStyles,
29
- '@supports not selector(*:focus-visible)': {
30
- ':focus': baseFocusRingStyles
28
+ // Focus styles used when :focus-visible isn't supported
29
+ ':focus': baseFocusRingStyles,
30
+ // Remove default focus styles for mouse interactions if :focus-visible is supported
31
+ ':focus:not(:focus-visible)': {
32
+ outline: 'none'
31
33
  },
34
+ ':focus-visible': baseFocusRingStyles,
32
35
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
33
36
  ':focus-visible': {
34
37
  outline: '1px solid'
@@ -75,7 +78,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
75
78
  action: 'clicked',
76
79
  componentName: componentName || 'Anchor',
77
80
  packageName: "@atlaskit/primitives",
78
- packageVersion: "7.1.0",
81
+ packageVersion: "7.2.0",
79
82
  analyticsData: analyticsContext,
80
83
  actionSubject: 'link'
81
84
  });
@@ -17,10 +17,13 @@ var baseFocusRingStyles = {
17
17
  outlineOffset: 'space.025'
18
18
  };
19
19
  var focusRingStyles = xcss({
20
- ':focus-visible': baseFocusRingStyles,
21
- '@supports not selector(*:focus-visible)': {
22
- ':focus': baseFocusRingStyles
20
+ // Focus styles used when :focus-visible isn't supported
21
+ ':focus': baseFocusRingStyles,
22
+ // Remove default focus styles for mouse interactions if :focus-visible is supported
23
+ ':focus:not(:focus-visible)': {
24
+ outline: 'none'
23
25
  },
26
+ ':focus-visible': baseFocusRingStyles,
24
27
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
25
28
  ':focus-visible': {
26
29
  outline: '1px solid'
@@ -68,7 +71,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
68
71
  action: 'clicked',
69
72
  componentName: componentName || 'Pressable',
70
73
  packageName: "@atlaskit/primitives",
71
- packageVersion: "7.1.0",
74
+ packageVersion: "7.2.0",
72
75
  analyticsData: analyticsContext,
73
76
  actionSubject: 'button'
74
77
  });
@@ -1643,7 +1643,7 @@ type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen
1643
1643
  type CSSMediaQueries = {
1644
1644
  [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
1645
1645
  };
1646
- type ChainedCSSPseudos = ':visited:active' | ':active:visited' | ':hover::before' | ':hover::after' | ':focus-visible::before' | ':focus-visible::after';
1646
+ type ChainedCSSPseudos = ':visited:active' | ':active:visited' | ':hover::before' | ':hover::after' | ':focus-visible::before' | ':focus-visible::after' | ':focus:not(:focus-visible)';
1647
1647
  type CSSPseudos = {
1648
1648
  [Pseudo in CSS.Pseudos | ChainedCSSPseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
1649
1649
  };
@@ -1643,7 +1643,7 @@ type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen
1643
1643
  type CSSMediaQueries = {
1644
1644
  [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
1645
1645
  };
1646
- type ChainedCSSPseudos = ':visited:active' | ':active:visited' | ':hover::before' | ':hover::after' | ':focus-visible::before' | ':focus-visible::after';
1646
+ type ChainedCSSPseudos = ':visited:active' | ':active:visited' | ':hover::before' | ':hover::after' | ':focus-visible::before' | ':focus-visible::after' | ':focus:not(:focus-visible)';
1647
1647
  type CSSPseudos = {
1648
1648
  [Pseudo in CSS.Pseudos | ChainedCSSPseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
1649
1649
  };
package/package.json CHANGED
@@ -1,203 +1,188 @@
1
1
  {
2
- "name": "@atlaskit/primitives",
3
- "version": "7.1.0",
4
- "description": "Primitives are token-backed low-level building blocks.",
5
- "publishConfig": {
6
- "registry": "https://registry.npmjs.org/"
7
- },
8
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
- "author": "Atlassian Pty Ltd",
10
- "license": "Apache-2.0",
11
- "main": "dist/cjs/index.js",
12
- "module": "dist/esm/index.js",
13
- "module:es2019": "dist/es2019/index.js",
14
- "types": "dist/types/index.d.ts",
15
- "sideEffects": false,
16
- "atlaskit:src": "src/index.tsx",
17
- "atlassian": {
18
- "team": "Design System Team",
19
- "productPushConsumption": [
20
- "jira"
21
- ],
22
- "inPublicMirror": false,
23
- "releaseModel": "continuous",
24
- "website": {
25
- "category": "Primitives",
26
- "name": "Primitives",
27
- "status": {
28
- "type": "beta"
29
- },
30
- "pages": [
31
- {
32
- "title": "Overview",
33
- "id": "@atlaskit/primitives",
34
- "folder": "overview",
35
- "slug": "primitives/overview"
36
- },
37
- {
38
- "title": "Box",
39
- "folder": "box",
40
- "slug": "primitives/box",
41
- "id": "@atlaskit/primitives/box"
42
- },
43
- {
44
- "title": "Inline",
45
- "folder": "inline",
46
- "slug": "primitives/inline",
47
- "id": "@atlaskit/primitives/inline"
48
- },
49
- {
50
- "title": "Stack",
51
- "folder": "stack",
52
- "slug": "primitives/stack",
53
- "id": "@atlaskit/primitives/stack"
54
- },
55
- {
56
- "title": "Flex",
57
- "folder": "flex",
58
- "slug": "primitives/flex",
59
- "id": "@atlaskit/primitives/flex",
60
- "status": {
61
- "type": "beta"
62
- }
63
- },
64
- {
65
- "title": "Grid",
66
- "folder": "grid",
67
- "slug": "primitives/grid",
68
- "id": "@atlaskit/primitives/grid",
69
- "status": {
70
- "type": "beta"
71
- }
72
- },
73
- {
74
- "title": "Bleed",
75
- "folder": "bleed",
76
- "slug": "primitives/bleed",
77
- "id": "@atlaskit/primitives/bleed"
78
- },
79
- {
80
- "title": "XCSS",
81
- "folder": "xcss",
82
- "slug": "primitives/xcss",
83
- "id": "@atlaskit/primitives/xcss"
84
- },
85
- {
86
- "title": "Responsive",
87
- "folder": "responsive",
88
- "slug": "primitives/responsive",
89
- "id": "@atlaskit/primitives/responsive"
90
- },
91
- {
92
- "title": "Text",
93
- "folder": "text",
94
- "slug": "primitives/text",
95
- "id": "@atlaskit/primitives/text",
96
- "status": {
97
- "type": "beta"
98
- }
99
- },
100
- {
101
- "title": "Pressable",
102
- "folder": "pressable",
103
- "slug": "primitives/pressable",
104
- "id": "@atlaskit/primitives/pressable",
105
- "status": {
106
- "type": "beta"
107
- }
108
- },
109
- {
110
- "title": "Anchor",
111
- "folder": "anchor",
112
- "slug": "primitives/anchor",
113
- "id": "@atlaskit/primitives/anchor",
114
- "status": {
115
- "type": "closed-beta"
116
- }
117
- }
118
- ]
119
- },
120
- "runReact18": true
121
- },
122
- "scripts": {
123
- "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
124
- },
125
- "dependencies": {
126
- "@atlaskit/analytics-next": "^9.3.0",
127
- "@atlaskit/app-provider": "^1.3.0",
128
- "@atlaskit/css": "^0.1.0",
129
- "@atlaskit/ds-lib": "^2.3.0",
130
- "@atlaskit/interaction-context": "^2.1.0",
131
- "@atlaskit/tokens": "^1.50.0",
132
- "@atlaskit/visually-hidden": "^1.3.0",
133
- "@babel/runtime": "^7.0.0",
134
- "@emotion/react": "^11.7.1",
135
- "@emotion/serialize": "^1.1.0",
136
- "bind-event-listener": "^3.0.0",
137
- "react-uid": "^2.2.0",
138
- "tiny-invariant": "^1.2.0"
139
- },
140
- "peerDependencies": {
141
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
142
- },
143
- "devDependencies": {
144
- "@af/accessibility-testing": "*",
145
- "@af/formatting": "*",
146
- "@atlaskit/ssr": "*",
147
- "@atlaskit/toggle": "^13.1.0",
148
- "@atlaskit/tooltip": "^18.4.0",
149
- "@atlaskit/visual-regression": "*",
150
- "@atlassian/codegen": "^0.1.0",
151
- "@testing-library/react": "^12.1.5",
152
- "@testing-library/react-hooks": "^8.0.1",
153
- "csstype": "^3.1.0",
154
- "react-dom": "^16.8.0",
155
- "ts-node": "^10.9.1",
156
- "typescript": "~5.4.2",
157
- "wait-for-expect": "^1.2.0"
158
- },
159
- "techstack": {
160
- "@atlassian/frontend": {
161
- "import-structure": [
162
- "atlassian-conventions"
163
- ],
164
- "circular-dependencies": "file-and-folder-level"
165
- },
166
- "@repo/internal": {
167
- "design-system": "v1",
168
- "dom-events": "use-bind-event-listener",
169
- "analytics": "analytics-next",
170
- "ui-components": [
171
- "lite-mode"
172
- ],
173
- "deprecation": "no-deprecated-imports",
174
- "styling": [
175
- "static",
176
- "emotion"
177
- ],
178
- "design-tokens": [
179
- "color",
180
- "spacing"
181
- ]
182
- }
183
- },
184
- "homepage": "https://atlassian.design/components/primitives/overview/",
185
- "typesVersions": {
186
- ">=4.5 <4.9": {
187
- "*": [
188
- "dist/types-ts4.5/*",
189
- "dist/types-ts4.5/index.d.ts"
190
- ]
191
- }
192
- },
193
- "af:exports": {
194
- ".": "./src/index.tsx",
195
- "./box": "./src/components/box.tsx",
196
- "./stack": "./src/components/stack.tsx",
197
- "./inline": "./src/components/inline.tsx",
198
- "./text": "./src/components/text.tsx",
199
- "./pressable": "./src/components/pressable.tsx",
200
- "./anchor": "./src/components/anchor.tsx",
201
- "./responsive": "./src/responsive/index.tsx"
202
- }
203
- }
2
+ "name": "@atlaskit/primitives",
3
+ "version": "7.2.0",
4
+ "description": "Primitives are token-backed low-level building blocks.",
5
+ "publishConfig": {
6
+ "registry": "https://registry.npmjs.org/"
7
+ },
8
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
+ "author": "Atlassian Pty Ltd",
10
+ "license": "Apache-2.0",
11
+ "main": "dist/cjs/index.js",
12
+ "module": "dist/esm/index.js",
13
+ "module:es2019": "dist/es2019/index.js",
14
+ "types": "dist/types/index.d.ts",
15
+ "sideEffects": false,
16
+ "atlaskit:src": "src/index.tsx",
17
+ "atlassian": {
18
+ "team": "Design System Team",
19
+ "productPushConsumption": ["jira"],
20
+ "inPublicMirror": false,
21
+ "releaseModel": "continuous",
22
+ "website": {
23
+ "category": "Primitives",
24
+ "name": "Primitives",
25
+ "status": {
26
+ "type": "beta"
27
+ },
28
+ "pages": [
29
+ {
30
+ "title": "Overview",
31
+ "id": "@atlaskit/primitives",
32
+ "folder": "overview",
33
+ "slug": "primitives/overview"
34
+ },
35
+ {
36
+ "title": "Box",
37
+ "folder": "box",
38
+ "slug": "primitives/box",
39
+ "id": "@atlaskit/primitives/box"
40
+ },
41
+ {
42
+ "title": "Inline",
43
+ "folder": "inline",
44
+ "slug": "primitives/inline",
45
+ "id": "@atlaskit/primitives/inline"
46
+ },
47
+ {
48
+ "title": "Stack",
49
+ "folder": "stack",
50
+ "slug": "primitives/stack",
51
+ "id": "@atlaskit/primitives/stack"
52
+ },
53
+ {
54
+ "title": "Flex",
55
+ "folder": "flex",
56
+ "slug": "primitives/flex",
57
+ "id": "@atlaskit/primitives/flex",
58
+ "status": {
59
+ "type": "beta"
60
+ }
61
+ },
62
+ {
63
+ "title": "Grid",
64
+ "folder": "grid",
65
+ "slug": "primitives/grid",
66
+ "id": "@atlaskit/primitives/grid",
67
+ "status": {
68
+ "type": "beta"
69
+ }
70
+ },
71
+ {
72
+ "title": "Bleed",
73
+ "folder": "bleed",
74
+ "slug": "primitives/bleed",
75
+ "id": "@atlaskit/primitives/bleed"
76
+ },
77
+ {
78
+ "title": "XCSS",
79
+ "folder": "xcss",
80
+ "slug": "primitives/xcss",
81
+ "id": "@atlaskit/primitives/xcss"
82
+ },
83
+ {
84
+ "title": "Responsive",
85
+ "folder": "responsive",
86
+ "slug": "primitives/responsive",
87
+ "id": "@atlaskit/primitives/responsive"
88
+ },
89
+ {
90
+ "title": "Text",
91
+ "folder": "text",
92
+ "slug": "primitives/text",
93
+ "id": "@atlaskit/primitives/text",
94
+ "status": {
95
+ "type": "beta"
96
+ }
97
+ },
98
+ {
99
+ "title": "Pressable",
100
+ "folder": "pressable",
101
+ "slug": "primitives/pressable",
102
+ "id": "@atlaskit/primitives/pressable",
103
+ "status": {
104
+ "type": "beta"
105
+ }
106
+ },
107
+ {
108
+ "title": "Anchor",
109
+ "folder": "anchor",
110
+ "slug": "primitives/anchor",
111
+ "id": "@atlaskit/primitives/anchor",
112
+ "status": {
113
+ "type": "closed-beta"
114
+ }
115
+ }
116
+ ]
117
+ },
118
+ "runReact18": true
119
+ },
120
+ "scripts": {
121
+ "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
122
+ },
123
+ "dependencies": {
124
+ "@atlaskit/analytics-next": "^9.3.0",
125
+ "@atlaskit/app-provider": "^1.3.0",
126
+ "@atlaskit/css": "^0.1.0",
127
+ "@atlaskit/ds-lib": "^2.3.0",
128
+ "@atlaskit/interaction-context": "^2.1.0",
129
+ "@atlaskit/tokens": "^1.50.0",
130
+ "@atlaskit/visually-hidden": "^1.3.0",
131
+ "@babel/runtime": "^7.0.0",
132
+ "@emotion/react": "^11.7.1",
133
+ "@emotion/serialize": "^1.1.0",
134
+ "bind-event-listener": "^3.0.0",
135
+ "react-uid": "^2.2.0",
136
+ "tiny-invariant": "^1.2.0"
137
+ },
138
+ "peerDependencies": {
139
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
140
+ },
141
+ "devDependencies": {
142
+ "@af/accessibility-testing": "*",
143
+ "@af/formatting": "*",
144
+ "@atlaskit/ssr": "*",
145
+ "@atlaskit/toggle": "^13.1.0",
146
+ "@atlaskit/tooltip": "^18.4.0",
147
+ "@atlaskit/visual-regression": "*",
148
+ "@atlassian/codegen": "^0.1.0",
149
+ "@testing-library/react": "^12.1.5",
150
+ "@testing-library/react-hooks": "^8.0.1",
151
+ "csstype": "^3.1.0",
152
+ "react-dom": "^16.8.0",
153
+ "ts-node": "^10.9.1",
154
+ "typescript": "~5.4.2",
155
+ "wait-for-expect": "^1.2.0"
156
+ },
157
+ "techstack": {
158
+ "@atlassian/frontend": {
159
+ "import-structure": ["atlassian-conventions"],
160
+ "circular-dependencies": "file-and-folder-level"
161
+ },
162
+ "@repo/internal": {
163
+ "design-system": "v1",
164
+ "dom-events": "use-bind-event-listener",
165
+ "analytics": "analytics-next",
166
+ "ui-components": ["lite-mode"],
167
+ "deprecation": "no-deprecated-imports",
168
+ "styling": ["static", "emotion"],
169
+ "design-tokens": ["color", "spacing"]
170
+ }
171
+ },
172
+ "homepage": "https://atlassian.design/components/primitives/overview/",
173
+ "typesVersions": {
174
+ ">=4.5 <4.9": {
175
+ "*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
176
+ }
177
+ },
178
+ "af:exports": {
179
+ ".": "./src/index.tsx",
180
+ "./box": "./src/components/box.tsx",
181
+ "./stack": "./src/components/stack.tsx",
182
+ "./inline": "./src/components/inline.tsx",
183
+ "./text": "./src/components/text.tsx",
184
+ "./pressable": "./src/components/pressable.tsx",
185
+ "./anchor": "./src/components/anchor.tsx",
186
+ "./responsive": "./src/responsive/index.tsx"
187
+ }
188
+ }