@atlaskit/primitives 8.2.0 → 9.0.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 (12) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/components/anchor.js +85 -55
  3. package/dist/cjs/components/pressable.js +81 -54
  4. package/dist/es2019/components/anchor.js +87 -51
  5. package/dist/es2019/components/pressable.js +83 -50
  6. package/dist/esm/components/anchor.js +87 -53
  7. package/dist/esm/components/pressable.js +83 -52
  8. package/dist/types/components/anchor.d.ts +73 -10
  9. package/dist/types/components/pressable.d.ts +8 -4
  10. package/dist/types-ts4.5/components/anchor.d.ts +73 -10
  11. package/dist/types-ts4.5/components/pressable.d.ts +8 -4
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 9.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#114987](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114987)
8
+ [`d4d420c947747`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d4d420c947747) -
9
+ [ux] Pressable and Anchor primitives no longer support surface color detection to improve
10
+ performance. These primitives don't contain nested layouts so this is not needed. Although this is
11
+ a breaking change, the impact of this change is minimal as no usage of surface detection in these
12
+ primitives has been observed.
13
+
14
+ ## 8.2.1
15
+
16
+ ### Patch Changes
17
+
18
+ - [#113600](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113600)
19
+ [`7ba62903cc2eb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ba62903cc2eb) -
20
+ Internal changes to both Pressable and Anchor primitives. They no longer use the Box primitive.
21
+ There are no changes for consumers.
22
+
3
23
  ## 8.2.0
4
24
 
5
25
  ### Minor Changes
package/dist/cjs/components/anchor.js CHANGED
@@ -1,16 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof3 = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
9
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
12
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
- var _react = _interopRequireWildcard(require("react"));
11
+ var _react = require("react");
12
+ var _react2 = require("@emotion/react");
14
13
  var _reactUid = require("react-uid");
15
14
  var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
16
15
  var _analyticsNext = require("@atlaskit/analytics-next");
@@ -18,39 +17,53 @@ var _appProvider = require("@atlaskit/app-provider");
18
17
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
19
18
  var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
20
19
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
20
+ var _styleMaps = require("../xcss/style-maps.partial");
21
21
  var _xcss = require("../xcss/xcss");
22
- var _box = _interopRequireDefault(require("./box"));
23
- var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"];
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); }
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; }
26
- // TODO: Duplicated FocusRing styles due to lack of `xcss` support
27
- // and to prevent additional dependency
28
- var baseFocusRingStyles = {
29
- outlineColor: 'color.border.focused',
30
- outlineWidth: 'border.width.outline',
31
- outlineStyle: 'solid',
32
- outlineOffset: 'space.025'
33
- };
34
- var defaultStyles = (0, _xcss.xcss)({
35
- textDecoration: 'underline'
36
- });
37
- var focusRingStyles = (0, _xcss.xcss)({
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)': {
22
+ var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
23
+ _excluded2 = ["className"];
24
+ /**
25
+ * @jsxRuntime classic
26
+ */
27
+ /** @jsx jsx */
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
29
+ // TODO: duplicates FocusRing styles from `@atlaskit/focus-ring`.
30
+ var focusRingStyles = (0, _react2.css)({
31
+ '&:focus, &:focus-visible': {
32
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
33
+ outlineColor: _styleMaps.borderColorMap['color.border.focused'],
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
35
+ outlineOffset: _styleMaps.positiveSpaceMap['space.025'],
36
+ outlineStyle: 'solid',
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
38
+ outlineWidth: _styleMaps.borderWidthMap['border.width.outline']
39
+ },
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
41
+ '&:focus:not(:focus-visible)': {
42
42
  outline: 'none'
43
43
  },
44
- ':focus-visible': baseFocusRingStyles,
45
44
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
46
- ':focus-visible': {
45
+ '&:focus-visible': {
47
46
  outline: '1px solid'
48
47
  }
49
48
  }
50
49
  });
50
+ var baseStyles = (0, _react2.css)({
51
+ boxSizing: 'border-box',
52
+ textDecoration: 'underline'
53
+ });
51
54
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
52
55
  var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
53
56
  var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
57
+
58
+ /**
59
+ * __Anchor__
60
+ *
61
+ * A primitive for building custom anchor links.
62
+ *
63
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
64
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
65
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
66
+ */
54
67
  var AnchorNoRef = function AnchorNoRef(_ref, ref) {
55
68
  var href = _ref.href,
56
69
  children = _ref.children,
@@ -62,9 +75,6 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
62
75
  paddingInline = _ref.paddingInline,
63
76
  paddingInlineStart = _ref.paddingInlineStart,
64
77
  paddingInlineEnd = _ref.paddingInlineEnd,
65
- testId = _ref.testId,
66
- xcssStyles = _ref.xcss,
67
- target = _ref.target,
68
78
  _ref$onClick = _ref.onClick,
69
79
  providedOnClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
70
80
  interactionName = _ref.interactionName,
@@ -72,12 +82,17 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
72
82
  analyticsContext = _ref.analyticsContext,
73
83
  ariaLabel = _ref['aria-label'],
74
84
  ariaLabelledBy = _ref['aria-labelledby'],
85
+ style = _ref.style,
86
+ target = _ref.target,
87
+ testId = _ref.testId,
88
+ xcss = _ref.xcss,
75
89
  htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
76
90
  var interactionContext = (0, _react.useContext)(_interactionContext.default);
77
91
  var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
78
92
  interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
79
93
  providedOnClick(e, analyticsEvent);
80
94
  }, [providedOnClick, interactionContext, interactionName]);
95
+
81
96
  // TODO: Use React 18's useId() hook when we update.
82
97
  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
83
98
  var opensNewWindowLabelId = (0, _reactUid.uid)({
@@ -88,16 +103,17 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
88
103
  action: 'clicked',
89
104
  componentName: componentName || 'Anchor',
90
105
  packageName: "@atlaskit/primitives",
91
- packageVersion: "8.2.0",
106
+ packageVersion: "9.0.0",
92
107
  analyticsData: analyticsContext,
93
108
  actionSubject: 'link'
94
109
  });
95
- var RouterLink = (0, _appProvider.useRouterLink)();
96
110
 
97
- // We're type coercing this as Compiled styles in an array isn't supported by the types
98
- // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
99
- // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
100
- var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
111
+ // This is to remove className from safeHtmlAttributes
112
+ // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
113
+ var _spreadClass = htmlAttributes.className,
114
+ safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
115
+ var resolvedStyles = (0, _xcss.parseXcss)(xcss);
116
+ var RouterLink = (0, _appProvider.useRouterLink)();
101
117
  var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
102
118
  var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
103
119
 
@@ -111,31 +127,45 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
111
127
  var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
112
128
  var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
113
129
  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
114
- return /*#__PURE__*/_react.default.createElement(_box.default
115
- // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
116
- , (0, _extends2.default)({}, htmlAttributes, {
117
- // @ts-expect-error (TODO: Box doesn't allow `as` components)
118
- as: isRouterLink ? RouterLink : 'a',
119
- ref: ref,
120
- testId: testId,
121
- "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
130
+ var Component = isRouterLink ? RouterLink : 'a';
131
+ return (0, _react2.jsx)(Component
132
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
133
+ , (0, _extends2.default)({
134
+ style: style,
135
+ ref: ref
136
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
137
+ ,
138
+ className: resolvedStyles.static
139
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
140
+ }, safeHtmlAttributes, {
141
+ // @ts-expect-error
122
142
  href: !isRouterLink && typeof href !== 'string' ? undefined : href,
123
143
  target: target,
124
- backgroundColor: backgroundColor,
125
- padding: padding,
126
- paddingBlock: paddingBlock,
127
- paddingBlockStart: paddingBlockStart,
128
- paddingBlockEnd: paddingBlockEnd,
129
- paddingInline: paddingInline,
130
- paddingInlineStart: paddingInlineStart,
131
- paddingInlineEnd: paddingInlineEnd,
132
144
  onClick: onClick,
133
145
  "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
135
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
136
- ,
137
- xcss: styles
138
- }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
146
+ "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
147
+ css: [baseStyles, focusRingStyles,
148
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
149
+ backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor],
150
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
151
+ padding && _styleMaps.paddingStylesMap.padding[padding],
152
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
153
+ paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock],
154
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
155
+ paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart],
156
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
157
+ paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
158
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
159
+ paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline],
160
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
161
+ paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart],
162
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
163
+ paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
164
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
165
+ resolvedStyles.emotion],
166
+ "data-testid": testId,
167
+ "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
168
+ }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && (0, _react2.jsx)(_visuallyHidden.default, {
139
169
  id: opensNewWindowLabelId
140
170
  }, OPENS_NEW_WINDOW_LABEL));
141
171
  };
package/dist/cjs/components/pressable.js CHANGED
@@ -1,45 +1,58 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
- var _react = _interopRequireWildcard(require("react"));
10
+ var _react = require("react");
11
+ var _react2 = require("@emotion/react");
13
12
  var _analyticsNext = require("@atlaskit/analytics-next");
14
13
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
15
14
  var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
15
+ var _styleMaps = require("../xcss/style-maps.partial");
16
16
  var _xcss = require("../xcss/xcss");
17
- var _box = _interopRequireDefault(require("./box"));
18
- var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss", "onClick", "interactionName", "componentName", "analyticsContext"];
19
- 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); }
20
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
21
- // TODO: Duplicated FocusRing styles due to lack of `xcss` support
22
- // and to prevent additional dependency
23
- var baseFocusRingStyles = {
24
- outlineColor: 'color.border.focused',
25
- outlineWidth: 'border.width.outline',
26
- outlineStyle: 'solid',
27
- outlineOffset: 'space.025'
28
- };
29
- var focusRingStyles = (0, _xcss.xcss)({
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)': {
17
+ var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss"],
18
+ _excluded2 = ["className"];
19
+ /**
20
+ * @jsxRuntime classic
21
+ */
22
+ /** @jsx jsx */
23
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
24
+ // This duplicates FocusRing styles from `@atlaskit/focus-ring`.
25
+ var focusRingStyles = (0, _react2.css)({
26
+ '&:focus, &:focus-visible': {
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
28
+ outlineColor: _styleMaps.borderColorMap['color.border.focused'],
29
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
30
+ outlineOffset: _styleMaps.positiveSpaceMap['space.025'],
31
+ outlineStyle: 'solid',
32
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
33
+ outlineWidth: _styleMaps.borderWidthMap['border.width.outline']
34
+ },
35
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
36
+ '&:focus:not(:focus-visible)': {
34
37
  outline: 'none'
35
38
  },
36
- ':focus-visible': baseFocusRingStyles,
37
39
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
38
- ':focus-visible': {
40
+ '&:focus-visible': {
39
41
  outline: '1px solid'
40
42
  }
41
43
  }
42
44
  });
45
+ var baseStyles = (0, _react2.css)({
46
+ boxSizing: 'border-box',
47
+ appearance: 'none',
48
+ border: 'none'
49
+ });
50
+ var enabledStyles = (0, _react2.css)({
51
+ cursor: 'pointer'
52
+ });
53
+ var disabledStyles = (0, _react2.css)({
54
+ cursor: 'not-allowed'
55
+ });
43
56
 
44
57
  /**
45
58
  * __Pressable__
@@ -63,13 +76,14 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
63
76
  isDisabled = _ref.isDisabled,
64
77
  _ref$type = _ref.type,
65
78
  type = _ref$type === void 0 ? 'button' : _ref$type,
66
- testId = _ref.testId,
67
- xcssStyles = _ref.xcss,
68
79
  _ref$onClick = _ref.onClick,
69
80
  providedOnClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
70
81
  interactionName = _ref.interactionName,
71
82
  componentName = _ref.componentName,
72
83
  analyticsContext = _ref.analyticsContext,
84
+ style = _ref.style,
85
+ testId = _ref.testId,
86
+ xcss = _ref.xcss,
73
87
  htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
74
88
  var interactionContext = (0, _react.useContext)(_interactionContext.default);
75
89
  var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
@@ -81,39 +95,52 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
81
95
  action: 'clicked',
82
96
  componentName: componentName || 'Pressable',
83
97
  packageName: "@atlaskit/primitives",
84
- packageVersion: "8.2.0",
98
+ packageVersion: "9.0.0",
85
99
  analyticsData: analyticsContext,
86
100
  actionSubject: 'button'
87
101
  });
88
102
 
89
- // Combine default styles with supplied styles. XCSS does not support deep nested arrays
90
- var styles = [(0, _xcss.xcss)({
91
- cursor: isDisabled ? 'not-allowed' : 'pointer'
92
- }), focusRingStyles];
93
-
94
- // We're type coercing this as Compiled styles in an array isn't supported by the types
95
- // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
96
- // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
97
- styles = Array.isArray(xcssStyles) ? [].concat((0, _toConsumableArray2.default)(styles), (0, _toConsumableArray2.default)(xcssStyles)) : [].concat((0, _toConsumableArray2.default)(styles), [xcssStyles]);
98
- return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({}, htmlAttributes, {
99
- // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
100
- as: "button",
101
- ref: ref,
102
- testId: testId,
103
- type: type,
104
- onClick: onClick,
105
- backgroundColor: backgroundColor,
106
- padding: padding,
107
- paddingBlock: paddingBlock,
108
- paddingBlockStart: paddingBlockStart,
109
- paddingBlockEnd: paddingBlockEnd,
110
- paddingInline: paddingInline,
111
- paddingInlineStart: paddingInlineStart,
112
- paddingInlineEnd: paddingInlineEnd
113
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
114
- ,
115
- xcss: styles,
116
- disabled: isDisabled
117
- }), children);
103
+ // This is to remove className from safeHtmlAttributes
104
+ // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
105
+ var _spreadClass = htmlAttributes.className,
106
+ safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
107
+ var resolvedStyles = (0, _xcss.parseXcss)(xcss);
108
+ return (
109
+ // eslint-disable-next-line @atlaskit/design-system/no-html-button
110
+ (0, _react2.jsx)("button", (0, _extends2.default)({
111
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
112
+ style: style,
113
+ ref: ref
114
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
115
+ ,
116
+ className: resolvedStyles.static
117
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
118
+ }, safeHtmlAttributes, {
119
+ // eslint-disable-next-line react/button-has-type
120
+ type: type,
121
+ onClick: onClick,
122
+ disabled: isDisabled,
123
+ css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
124
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
125
+ backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor],
126
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
127
+ padding && _styleMaps.paddingStylesMap.padding[padding],
128
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
129
+ paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock],
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
131
+ paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart],
132
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
133
+ paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
134
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
135
+ paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline],
136
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
137
+ paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart],
138
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
139
+ paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
140
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
141
+ resolvedStyles.emotion],
142
+ "data-testid": testId
143
+ }), children)
144
+ );
118
145
  });
119
146
  var _default = exports.default = Pressable;
package/dist/es2019/components/anchor.js CHANGED
@@ -1,5 +1,12 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { forwardRef, useCallback, useContext } from 'react';
2
+ /**
3
+ * @jsxRuntime classic
4
+ */
5
+ /** @jsx jsx */
6
+ import { forwardRef, useCallback, useContext } from 'react';
7
+
8
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
+ import { css, jsx } from '@emotion/react';
3
10
  import { uid } from 'react-uid';
4
11
  import invariant from 'tiny-invariant';
5
12
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
@@ -7,36 +14,46 @@ import { useRouterLink } from '@atlaskit/app-provider';
7
14
  import noop from '@atlaskit/ds-lib/noop';
8
15
  import InteractionContext from '@atlaskit/interaction-context';
9
16
  import VisuallyHidden from '@atlaskit/visually-hidden';
10
- import { xcss } from '../xcss/xcss';
11
- import Box from './box';
12
- // TODO: Duplicated FocusRing styles due to lack of `xcss` support
13
- // and to prevent additional dependency
14
- const baseFocusRingStyles = {
15
- outlineColor: 'color.border.focused',
16
- outlineWidth: 'border.width.outline',
17
- outlineStyle: 'solid',
18
- outlineOffset: 'space.025'
19
- };
20
- const defaultStyles = xcss({
21
- textDecoration: 'underline'
22
- });
23
- const focusRingStyles = xcss({
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)': {
17
+ import { backgroundColorStylesMap, borderColorMap, borderWidthMap, paddingStylesMap, positiveSpaceMap } from '../xcss/style-maps.partial';
18
+ import { parseXcss } from '../xcss/xcss';
19
+ // TODO: duplicates FocusRing styles from `@atlaskit/focus-ring`.
20
+ const focusRingStyles = css({
21
+ '&:focus, &:focus-visible': {
22
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
23
+ outlineColor: borderColorMap['color.border.focused'],
24
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
25
+ outlineOffset: positiveSpaceMap['space.025'],
26
+ outlineStyle: 'solid',
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
28
+ outlineWidth: borderWidthMap['border.width.outline']
29
+ },
30
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
31
+ '&:focus:not(:focus-visible)': {
28
32
  outline: 'none'
29
33
  },
30
- ':focus-visible': baseFocusRingStyles,
31
34
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
32
- ':focus-visible': {
35
+ '&:focus-visible': {
33
36
  outline: '1px solid'
34
37
  }
35
38
  }
36
39
  });
40
+ const baseStyles = css({
41
+ boxSizing: 'border-box',
42
+ textDecoration: 'underline'
43
+ });
37
44
  const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
38
45
  const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
39
46
  const OPENS_NEW_WINDOW_LABEL = '(opens new window)';
47
+
48
+ /**
49
+ * __Anchor__
50
+ *
51
+ * A primitive for building custom anchor links.
52
+ *
53
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
54
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
55
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
56
+ */
40
57
  const AnchorNoRef = ({
41
58
  href,
42
59
  children,
@@ -48,15 +65,16 @@ const AnchorNoRef = ({
48
65
  paddingInline,
49
66
  paddingInlineStart,
50
67
  paddingInlineEnd,
51
- testId,
52
- xcss: xcssStyles,
53
- target,
54
68
  onClick: providedOnClick = noop,
55
69
  interactionName,
56
70
  componentName,
57
71
  analyticsContext,
58
72
  'aria-label': ariaLabel,
59
73
  'aria-labelledby': ariaLabelledBy,
74
+ style,
75
+ target,
76
+ testId,
77
+ xcss,
60
78
  ...htmlAttributes
61
79
  }, ref) => {
62
80
  const interactionContext = useContext(InteractionContext);
@@ -64,6 +82,7 @@ const AnchorNoRef = ({
64
82
  interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
65
83
  providedOnClick(e, analyticsEvent);
66
84
  }, [providedOnClick, interactionContext, interactionName]);
85
+
67
86
  // TODO: Use React 18's useId() hook when we update.
68
87
  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
69
88
  const opensNewWindowLabelId = uid({
@@ -74,16 +93,19 @@ const AnchorNoRef = ({
74
93
  action: 'clicked',
75
94
  componentName: componentName || 'Anchor',
76
95
  packageName: "@atlaskit/primitives",
77
- packageVersion: "8.2.0",
96
+ packageVersion: "9.0.0",
78
97
  analyticsData: analyticsContext,
79
98
  actionSubject: 'link'
80
99
  });
81
- const RouterLink = useRouterLink();
82
100
 
83
- // We're type coercing this as Compiled styles in an array isn't supported by the types
84
- // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
85
- // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
86
- const styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles, ...xcssStyles] : [defaultStyles, focusRingStyles, xcssStyles];
101
+ // This is to remove className from safeHtmlAttributes
102
+ // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
103
+ const {
104
+ className: _spreadClass,
105
+ ...safeHtmlAttributes
106
+ } = htmlAttributes;
107
+ const resolvedStyles = parseXcss(xcss);
108
+ const RouterLink = useRouterLink();
87
109
  const isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
88
110
  const isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
89
111
 
@@ -97,31 +119,45 @@ const AnchorNoRef = ({
97
119
  const isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
98
120
  const hrefObjectUsedWithoutRouterLink = RouterLink === undefined && typeof href === 'object';
99
121
  invariant(!hrefObjectUsedWithoutRouterLink, `@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider`);
100
- return /*#__PURE__*/React.createElement(Box
101
- // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
102
- , _extends({}, htmlAttributes, {
103
- // @ts-expect-error (TODO: Box doesn't allow `as` components)
104
- as: isRouterLink ? RouterLink : 'a',
105
- ref: ref,
106
- testId: testId,
107
- "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
122
+ const Component = isRouterLink ? RouterLink : 'a';
123
+ return jsx(Component
124
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
125
+ , _extends({
126
+ style: style,
127
+ ref: ref
128
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
129
+ ,
130
+ className: resolvedStyles.static
131
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
132
+ }, safeHtmlAttributes, {
133
+ // @ts-expect-error
108
134
  href: !isRouterLink && typeof href !== 'string' ? undefined : href,
109
135
  target: target,
110
- backgroundColor: backgroundColor,
111
- padding: padding,
112
- paddingBlock: paddingBlock,
113
- paddingBlockStart: paddingBlockStart,
114
- paddingBlockEnd: paddingBlockEnd,
115
- paddingInline: paddingInline,
116
- paddingInlineStart: paddingInlineStart,
117
- paddingInlineEnd: paddingInlineEnd,
118
136
  onClick: onClick,
119
137
  "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? `${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}` : ariaLabel,
120
- "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy
121
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
122
- ,
123
- xcss: styles
124
- }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
138
+ "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy,
139
+ css: [baseStyles, focusRingStyles,
140
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
141
+ backgroundColor && backgroundColorStylesMap[backgroundColor],
142
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
143
+ padding && paddingStylesMap.padding[padding],
144
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
145
+ paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
146
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
147
+ paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
148
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
149
+ paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
150
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
151
+ paddingInline && paddingStylesMap.paddingInline[paddingInline],
152
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
153
+ paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
154
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
155
+ paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
156
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
157
+ resolvedStyles.emotion],
158
+ "data-testid": testId,
159
+ "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
160
+ }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
125
161
  id: opensNewWindowLabelId
126
162
  }, OPENS_NEW_WINDOW_LABEL));
127
163
  };