@atlaskit/primitives 7.0.3 → 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.
Files changed (14) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/cjs/components/anchor.js +23 -7
  3. package/dist/cjs/components/pressable.js +7 -4
  4. package/dist/es2019/components/anchor.js +22 -6
  5. package/dist/es2019/components/pressable.js +7 -4
  6. package/dist/esm/components/anchor.js +23 -7
  7. package/dist/esm/components/pressable.js +7 -4
  8. package/dist/types/components/anchor.d.ts +3 -7
  9. package/dist/types/components/pressable.d.ts +3 -13
  10. package/dist/types/xcss/xcss.d.ts +1 -1
  11. package/dist/types-ts4.5/components/anchor.d.ts +3 -7
  12. package/dist/types-ts4.5/components/pressable.d.ts +3 -13
  13. package/dist/types-ts4.5/xcss/xcss.d.ts +1 -1
  14. package/package.json +187 -201
package/CHANGELOG.md CHANGED
@@ -1,5 +1,36 @@
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
+
18
+ ## 7.1.0
19
+
20
+ ### Minor Changes
21
+
22
+ - [#110702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110702)
23
+ [`b8c2eefeb195b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b8c2eefeb195b) - -
24
+ Anchor and Pressable primitives no longer require `children`, so labels can be supplied through
25
+ aria attributes if required
26
+
27
+ ### Patch Changes
28
+
29
+ - [#110702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110702)
30
+ [`b8c2eefeb195b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b8c2eefeb195b) - -
31
+ Fixed a bug with Anchor, where the "(opens new window)" label was not being automatically appended
32
+ to `aria-label` or `aria-labelledby`.
33
+
3
34
  ## 7.0.3
4
35
 
5
36
  ### Patch Changes
package/dist/cjs/components/anchor.js CHANGED
@@ -11,6 +11,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
11
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
12
12
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
13
  var _react = _interopRequireWildcard(require("react"));
14
+ var _reactUid = require("react-uid");
14
15
  var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
15
16
  var _analyticsNext = require("@atlaskit/analytics-next");
16
17
  var _appProvider = require("@atlaskit/app-provider");
@@ -19,7 +20,7 @@ var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-
19
20
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
20
21
  var _xcss = require("../xcss/xcss");
21
22
  var _box = _interopRequireDefault(require("./box"));
22
- var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext"];
23
+ var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"];
23
24
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
24
25
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
25
26
  // TODO: Duplicated FocusRing styles due to lack of `xcss` support
@@ -34,10 +35,13 @@ var defaultStyles = (0, _xcss.xcss)({
34
35
  textDecoration: 'underline'
35
36
  });
36
37
  var focusRingStyles = (0, _xcss.xcss)({
37
- ':focus-visible': baseFocusRingStyles,
38
- '@supports not selector(*:focus-visible)': {
39
- ':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'
40
43
  },
44
+ ':focus-visible': baseFocusRingStyles,
41
45
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
42
46
  ':focus-visible': {
43
47
  outline: '1px solid'
@@ -46,6 +50,7 @@ var focusRingStyles = (0, _xcss.xcss)({
46
50
  });
47
51
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
48
52
  var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
53
+ var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
49
54
  var AnchorNoRef = function AnchorNoRef(_ref, ref) {
50
55
  var href = _ref.href,
51
56
  children = _ref.children,
@@ -65,18 +70,25 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
65
70
  interactionName = _ref.interactionName,
66
71
  componentName = _ref.componentName,
67
72
  analyticsContext = _ref.analyticsContext,
73
+ ariaLabel = _ref['aria-label'],
74
+ ariaLabelledBy = _ref['aria-labelledby'],
68
75
  htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
69
76
  var interactionContext = (0, _react.useContext)(_interactionContext.default);
70
77
  var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
71
78
  interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
72
79
  providedOnClick(e, analyticsEvent);
73
80
  }, [providedOnClick, interactionContext, interactionName]);
81
+ // TODO: Use React 18's useId() hook when we update.
82
+ // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
83
+ var opensNewWindowLabelId = (0, _reactUid.uid)({
84
+ ariaLabelledBy: ariaLabelledBy
85
+ });
74
86
  var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
75
87
  fn: handleClick,
76
88
  action: 'clicked',
77
89
  componentName: componentName || 'Anchor',
78
90
  packageName: "@atlaskit/primitives",
79
- packageVersion: "7.0.3",
91
+ packageVersion: "7.2.0",
80
92
  analyticsData: analyticsContext,
81
93
  actionSubject: 'link'
82
94
  });
@@ -117,11 +129,15 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
117
129
  paddingInline: paddingInline,
118
130
  paddingInlineStart: paddingInlineStart,
119
131
  paddingInlineEnd: paddingInlineEnd,
120
- onClick: onClick
132
+ onClick: onClick,
133
+ "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel,
134
+ "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy
121
135
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
122
136
  ,
123
137
  xcss: styles
124
- }), children, target === '_blank' && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, "(opens new window)"));
138
+ }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
139
+ id: opensNewWindowLabelId
140
+ }, OPENS_NEW_WINDOW_LABEL));
125
141
  };
126
142
 
127
143
  // Workarounds to support generic types with forwardRef
package/dist/cjs/components/pressable.js CHANGED
@@ -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.0.3",
84
+ packageVersion: "7.2.0",
82
85
  analyticsData: analyticsContext,
83
86
  actionSubject: 'button'
84
87
  });
package/dist/es2019/components/anchor.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { forwardRef, useCallback, useContext } from 'react';
3
+ import { uid } from 'react-uid';
3
4
  import invariant from 'tiny-invariant';
4
5
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
5
6
  import { useRouterLink } from '@atlaskit/app-provider';
@@ -20,10 +21,13 @@ const defaultStyles = xcss({
20
21
  textDecoration: 'underline'
21
22
  });
22
23
  const focusRingStyles = xcss({
23
- ':focus-visible': baseFocusRingStyles,
24
- '@supports not selector(*:focus-visible)': {
25
- ':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'
26
29
  },
30
+ ':focus-visible': baseFocusRingStyles,
27
31
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
28
32
  ':focus-visible': {
29
33
  outline: '1px solid'
@@ -32,6 +36,7 @@ const focusRingStyles = xcss({
32
36
  });
33
37
  const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
34
38
  const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
39
+ const OPENS_NEW_WINDOW_LABEL = '(opens new window)';
35
40
  const AnchorNoRef = ({
36
41
  href,
37
42
  children,
@@ -50,6 +55,8 @@ const AnchorNoRef = ({
50
55
  interactionName,
51
56
  componentName,
52
57
  analyticsContext,
58
+ 'aria-label': ariaLabel,
59
+ 'aria-labelledby': ariaLabelledBy,
53
60
  ...htmlAttributes
54
61
  }, ref) => {
55
62
  const interactionContext = useContext(InteractionContext);
@@ -57,12 +64,17 @@ const AnchorNoRef = ({
57
64
  interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
58
65
  providedOnClick(e, analyticsEvent);
59
66
  }, [providedOnClick, interactionContext, interactionName]);
67
+ // TODO: Use React 18's useId() hook when we update.
68
+ // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
69
+ const opensNewWindowLabelId = uid({
70
+ ariaLabelledBy
71
+ });
60
72
  const onClick = usePlatformLeafEventHandler({
61
73
  fn: handleClick,
62
74
  action: 'clicked',
63
75
  componentName: componentName || 'Anchor',
64
76
  packageName: "@atlaskit/primitives",
65
- packageVersion: "7.0.3",
77
+ packageVersion: "7.2.0",
66
78
  analyticsData: analyticsContext,
67
79
  actionSubject: 'link'
68
80
  });
@@ -103,11 +115,15 @@ const AnchorNoRef = ({
103
115
  paddingInline: paddingInline,
104
116
  paddingInlineStart: paddingInlineStart,
105
117
  paddingInlineEnd: paddingInlineEnd,
106
- onClick: onClick
118
+ onClick: onClick,
119
+ "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? `${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}` : ariaLabel,
120
+ "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy
107
121
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
108
122
  ,
109
123
  xcss: styles
110
- }), children, target === '_blank' && /*#__PURE__*/React.createElement(VisuallyHidden, null, "(opens new window)"));
124
+ }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
125
+ id: opensNewWindowLabelId
126
+ }, OPENS_NEW_WINDOW_LABEL));
111
127
  };
112
128
 
113
129
  // Workarounds to support generic types with forwardRef
package/dist/es2019/components/pressable.js CHANGED
@@ -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.0.3",
70
+ packageVersion: "7.2.0",
68
71
  analyticsData: analyticsContext,
69
72
  actionSubject: 'button'
70
73
  });
package/dist/esm/components/anchor.js CHANGED
@@ -2,8 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _typeof from "@babel/runtime/helpers/typeof";
3
3
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext"];
5
+ var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"];
6
6
  import React, { forwardRef, useCallback, useContext } from 'react';
7
+ import { uid } from 'react-uid';
7
8
  import invariant from 'tiny-invariant';
8
9
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
9
10
  import { useRouterLink } from '@atlaskit/app-provider';
@@ -24,10 +25,13 @@ var defaultStyles = xcss({
24
25
  textDecoration: 'underline'
25
26
  });
26
27
  var focusRingStyles = xcss({
27
- ':focus-visible': baseFocusRingStyles,
28
- '@supports not selector(*:focus-visible)': {
29
- ':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'
30
33
  },
34
+ ':focus-visible': baseFocusRingStyles,
31
35
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
32
36
  ':focus-visible': {
33
37
  outline: '1px solid'
@@ -36,6 +40,7 @@ var focusRingStyles = xcss({
36
40
  });
37
41
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
38
42
  var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
43
+ var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
39
44
  var AnchorNoRef = function AnchorNoRef(_ref, ref) {
40
45
  var href = _ref.href,
41
46
  children = _ref.children,
@@ -55,18 +60,25 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
55
60
  interactionName = _ref.interactionName,
56
61
  componentName = _ref.componentName,
57
62
  analyticsContext = _ref.analyticsContext,
63
+ ariaLabel = _ref['aria-label'],
64
+ ariaLabelledBy = _ref['aria-labelledby'],
58
65
  htmlAttributes = _objectWithoutProperties(_ref, _excluded);
59
66
  var interactionContext = useContext(InteractionContext);
60
67
  var handleClick = useCallback(function (e, analyticsEvent) {
61
68
  interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
62
69
  providedOnClick(e, analyticsEvent);
63
70
  }, [providedOnClick, interactionContext, interactionName]);
71
+ // TODO: Use React 18's useId() hook when we update.
72
+ // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
73
+ var opensNewWindowLabelId = uid({
74
+ ariaLabelledBy: ariaLabelledBy
75
+ });
64
76
  var onClick = usePlatformLeafEventHandler({
65
77
  fn: handleClick,
66
78
  action: 'clicked',
67
79
  componentName: componentName || 'Anchor',
68
80
  packageName: "@atlaskit/primitives",
69
- packageVersion: "7.0.3",
81
+ packageVersion: "7.2.0",
70
82
  analyticsData: analyticsContext,
71
83
  actionSubject: 'link'
72
84
  });
@@ -107,11 +119,15 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
107
119
  paddingInline: paddingInline,
108
120
  paddingInlineStart: paddingInlineStart,
109
121
  paddingInlineEnd: paddingInlineEnd,
110
- onClick: onClick
122
+ onClick: onClick,
123
+ "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel,
124
+ "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy
111
125
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
112
126
  ,
113
127
  xcss: styles
114
- }), children, target === '_blank' && /*#__PURE__*/React.createElement(VisuallyHidden, null, "(opens new window)"));
128
+ }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
129
+ id: opensNewWindowLabelId
130
+ }, OPENS_NEW_WINDOW_LABEL));
115
131
  };
116
132
 
117
133
  // Workarounds to support generic types with forwardRef
package/dist/esm/components/pressable.js CHANGED
@@ -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.0.3",
74
+ packageVersion: "7.2.0",
72
75
  analyticsData: analyticsContext,
73
76
  actionSubject: 'button'
74
77
  });
package/dist/types/components/anchor.d.ts CHANGED
@@ -1,12 +1,8 @@
1
- import React, { type ReactNode, type Ref } from 'react';
1
+ import React, { type Ref } from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
4
4
  import { type BoxProps } from './box';
5
- export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
6
- /**
7
- * `children` should be defined to ensure links have text.
8
- */
9
- children: ReactNode;
5
+ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & {
10
6
  /**
11
7
  * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
12
8
  */
@@ -26,7 +22,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
26
22
  */
27
23
  analyticsContext?: Record<string, any>;
28
24
  };
29
- declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
25
+ declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
30
26
  /**
31
27
  * __Anchor__
32
28
  *
package/dist/types/components/pressable.d.ts CHANGED
@@ -1,12 +1,7 @@
1
- import React, { type ReactNode } from 'react';
1
+ import React from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type BoxProps } from './box';
4
- export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'style' | 'onClick'> & {
5
- /**
6
- * `children` should be defined to ensure buttons are not empty,
7
- * because they should have labels.
8
- */
9
- children: ReactNode;
4
+ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & {
10
5
  isDisabled?: boolean;
11
6
  /**
12
7
  * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
@@ -34,12 +29,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
34
29
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
35
30
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
36
31
  */
37
- declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "onClick"> & {
38
- /**
39
- * `children` should be defined to ensure buttons are not empty,
40
- * because they should have labels.
41
- */
42
- children: ReactNode;
32
+ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & {
43
33
  isDisabled?: boolean | undefined;
44
34
  /**
45
35
  * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
package/dist/types/xcss/xcss.d.ts CHANGED
@@ -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/dist/types-ts4.5/components/anchor.d.ts CHANGED
@@ -1,12 +1,8 @@
1
- import React, { type ReactNode, type Ref } from 'react';
1
+ import React, { type Ref } from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
4
4
  import { type BoxProps } from './box';
5
- export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
6
- /**
7
- * `children` should be defined to ensure links have text.
8
- */
9
- children: ReactNode;
5
+ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & {
10
6
  /**
11
7
  * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
12
8
  */
@@ -26,7 +22,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
26
22
  */
27
23
  analyticsContext?: Record<string, any>;
28
24
  };
29
- declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
25
+ declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
30
26
  /**
31
27
  * __Anchor__
32
28
  *
package/dist/types-ts4.5/components/pressable.d.ts CHANGED
@@ -1,12 +1,7 @@
1
- import React, { type ReactNode } from 'react';
1
+ import React from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type BoxProps } from './box';
4
- export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'style' | 'onClick'> & {
5
- /**
6
- * `children` should be defined to ensure buttons are not empty,
7
- * because they should have labels.
8
- */
9
- children: ReactNode;
4
+ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & {
10
5
  isDisabled?: boolean;
11
6
  /**
12
7
  * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
@@ -34,12 +29,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
34
29
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
35
30
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
36
31
  */
37
- declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "onClick"> & {
38
- /**
39
- * `children` should be defined to ensure buttons are not empty,
40
- * because they should have labels.
41
- */
42
- children: ReactNode;
32
+ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & {
43
33
  isDisabled?: boolean | undefined;
44
34
  /**
45
35
  * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
package/dist/types-ts4.5/xcss/xcss.d.ts CHANGED
@@ -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,202 +1,188 @@
1
1
  {
2
- "name": "@atlaskit/primitives",
3
- "version": "7.0.3",
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
- "tiny-invariant": "^1.2.0"
138
- },
139
- "peerDependencies": {
140
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
141
- },
142
- "devDependencies": {
143
- "@af/accessibility-testing": "*",
144
- "@af/formatting": "*",
145
- "@atlaskit/ssr": "*",
146
- "@atlaskit/toggle": "^13.1.0",
147
- "@atlaskit/tooltip": "^18.4.0",
148
- "@atlaskit/visual-regression": "*",
149
- "@atlassian/codegen": "^0.1.0",
150
- "@testing-library/react": "^12.1.5",
151
- "@testing-library/react-hooks": "^8.0.1",
152
- "csstype": "^3.1.0",
153
- "react-dom": "^16.8.0",
154
- "ts-node": "^10.9.1",
155
- "typescript": "~5.4.2",
156
- "wait-for-expect": "^1.2.0"
157
- },
158
- "techstack": {
159
- "@atlassian/frontend": {
160
- "import-structure": [
161
- "atlassian-conventions"
162
- ],
163
- "circular-dependencies": "file-and-folder-level"
164
- },
165
- "@repo/internal": {
166
- "design-system": "v1",
167
- "dom-events": "use-bind-event-listener",
168
- "analytics": "analytics-next",
169
- "ui-components": [
170
- "lite-mode"
171
- ],
172
- "deprecation": "no-deprecated-imports",
173
- "styling": [
174
- "static",
175
- "emotion"
176
- ],
177
- "design-tokens": [
178
- "color",
179
- "spacing"
180
- ]
181
- }
182
- },
183
- "homepage": "https://atlassian.design/components/primitives/overview/",
184
- "typesVersions": {
185
- ">=4.5 <4.9": {
186
- "*": [
187
- "dist/types-ts4.5/*",
188
- "dist/types-ts4.5/index.d.ts"
189
- ]
190
- }
191
- },
192
- "af:exports": {
193
- ".": "./src/index.tsx",
194
- "./box": "./src/components/box.tsx",
195
- "./stack": "./src/components/stack.tsx",
196
- "./inline": "./src/components/inline.tsx",
197
- "./text": "./src/components/text.tsx",
198
- "./pressable": "./src/components/pressable.tsx",
199
- "./anchor": "./src/components/anchor.tsx",
200
- "./responsive": "./src/responsive/index.tsx"
201
- }
202
- }
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
+ }